adding fade to jquery image replacement

Question

Hello-

Im creating a nav that uses jquery to replace the image on rollover. Here is the code I am using:

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

basically, you add a suffix (_o) to the filename and when you rollover the src, jquery replaces it with the (_o).png. I want to add fade so when there is a rollover, the transition isn't instant, rather there is a quick, elegant fade. Any ideas?

Answer 1

You could layer a second (hidden) element over the top of your default image, then see about fading that one in and out with a rollover.

Answer 2

rather than replace, you'll have to overlay a new image and fade it in, waiting till the transition has completed.

something like...

$('.my_img').parent().append($('.my_img').clone().attr('src','my_img_o.jpg').fadeIn('slow'))

assuming the element is absolutely positioned

Answer 3

$('#the_image).hover(function() {
   $(this).fadeOut(function() {
     $(this).attr('src', $(this).attr('src').replace(".png", "_o.png")).fadeIn(); 
   });
}, function {
   $(this).fadeOut(function() {
     $(this).attr('src', $(this).attr('src').replace("_o.png", ".png")).fadeIn(); 
   });
});