Howto add fade in / fade out to this thumb preview

Question

How can I add some fade-in on hovering the thumbs?

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

The magic js which needs fade:

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

some more:

<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

Here is a quick jQuery example:

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

FIDDLE

To make it fade in/out faster:

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

You could also swap out 'fast' with the fade duration in milliseconds.

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