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

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