如何在此拇指预览中添加淡入/淡出

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; 
}