jQuery fade to new image

Question

How can I fade one image into another with jquery? As far as I can tell you would use fadeOut, change the source with attr() and then fadeIn again. But this doesn't seem to work in order. I don't want to use a plugin because I expect to add quite a few alterations.

Thanks.

Answer 1

In the simplest case, you'll need to use a callback on the call to fadeOut().

Assuming an image tag already on the page:

<img id="image" src="http://sstatic.net/so/img/logo.png" />

You pass a function as the callback argument to fadeOut() that resets the src attribute and then fades back using fadeIn():

$("#image").fadeOut(function() { 
  $(this).load(function() { $(this).fadeIn(); }); 
  $(this).attr("src", "http://sstatic.net/su/img/logo.png"); 
}); 

For animations in jQuery, callbacks are executed after the animation completes. This gives you the ability to chain animations sequentially. Note the call to load(). This makes sure the image is loaded before fading back in (Thanks to Y. Shoham).

Here's a working example

Answer 2

$("#main_image").fadeOut("slow",function(){
    $("#main_image").load(function () { //avoiding blinking, wait until loaded
        $("#main_image").fadeIn();
    });
    $("#main_image").attr("src","...");
});