如何在此拇指預覽中添加淡入/淡出

Question

如何在懸停拇指時添加一些淡入？

http://jsfiddle.net/GAa7D/1/

神奇的JS這就需要褪色：

function showT(image){document.getElementById('ima').setAttribute('src',image)} 

一些：

<img id="ima" src="http://www.google.com/images/srpr/logo3w.png" height="75" width="75"/> 

<a href="#" onmouseover="showT('http://www.google.com/logos/2012/cossington_smith-12-hp.jpg')">pic 1</a> 
<a href="#" onmouseover="showT('http://www.google.com/logos/2012/earthday12-hp.jpg')">pic 2</a> 
<a href="#" onmouseover="showT('http://www.google.com/logos/2012/Friedrich_Frobel-2012-hp.jpg')">pic 3</a> 

Answer 1

下面是一個簡單的jQuery例如：

$('#ima').fadeOut(function(){ 
    $('#ima').attr('src', image).fadeIn() 
}); 

FIDDLE

爲了使淡入/淡出更快：

$('#ima').fadeOut('fast', function(){ 
    $('#ima').attr('src', image).fadeIn('fast') 
}); 

你也可以換出'fast'衰減持續時間以毫秒爲單位。

FIDDLE

Answer 2

的jQuery：

$("#thumbnail-1").hover(function() {$(this).fadeIn(fast);},function() {$(this).fadeOut(fast);});

CSS3：

a { 
opacity:0.3; 
transition:opacity 1s; 
-webkit-transition:opacity 1s; /* Safari */ 
} 

a:hover { 
opacity:1; 
}