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

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

小提琴

为了使其淡入/淡出更快：

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

您还可以以毫秒为单位换掉'fast'淡入淡出的持续时间。

小提琴

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