user149109 user149109 - 2 years ago 104
Javascript Question

jQuery fade to new image

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.


Answer Source

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="" />

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", ""); 

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download