Switch text to image faded to / from

Question

I found and messed around with a good way to create text to scroll the image, here: http://jsfiddle.net/pkZAW/12/

$( function() { $("#imglink").hover( function () { $(this).attr('small',$(this).html()); $(this).html($(this).attr('full')); }, function () { $(this).html($(this).attr('small')); } ); });​ 

However, I need the transitions inside and outside to be wilted, as in the thumbnails here: http://lydiafraserward.co.uk/index.php?page=producing

After a long search, I could not add this transition to the script: -? .. any ideas ..?

Answer 1

I do not think that live () is required for this situation. I would not use fadeout on the mouseleave function, because the animation will add up.

You can also try the following:

 $( function() { $("#imglink").hover( function () { $(this).attr('small',$(this).html()); $(this).stop(false,true).fadeOut(250,function() { $(this).html($(this).attr('full')); $(this).stop(false,true).fadeIn(250); }); }, function () { $(this).html($(this).attr('small')); }); }); 

Edit: The flicker effect is fixed using the span tag around the anchor tag: Demo: http://jsfiddle.net/LYjvp/1/