Javascript doesn't wait for function to finish before executing next line

Question

I'm making a very simple image change over thats suppose to fade out the current image, change src of image, and then fade back in the image. Here is the basic code ...

    $("#picViewer").fadeOut("slow");
    document.getElementById("picViewer").src = "myImage.jpg";
    $("#picViewer").fadeIn("slow");

Instead of ...

1. Fade out image
2. Change Src
3. Fade in new image

The Javascript doesn't wait for fadeout to finish and this is what you see ...

1. Change image src
2. FadeOut
3. FadeIn

Am I missing something? Also here is a bonus, ... will JQuery allow me to fade to a different color other than white or must I employ typical hackery to work around the situation?

Answer 1

.fadeOut accepts a callback once done. You can place whatever you want to happen after fade out there.

The callback function also provides this as the element that just fade out. You can reuse using this instead of having to use the id of the element again to avoid hard-coding the id of the element in more than one place.

Also, you can chain jQuery function calls. Since attr() returns the object it modified (the $(this) ), you can chain .fadeIn() to fade-in that same element.

$("#picViewer").fadeOut("slow", function() {
   $(this).attr('src','myImage.jpg').fadeIn("slow");
});

In effect, less code.

Answer 2

The optional second parameter of fadeOut is a callback function which will be called after the element has finished fading out.

$("#picViewer").fadeOut("slow", function() {
   document.getElementById("picViewer").src = "myImage.jpg";
   $("#picViewer").fadeIn("slow");
});

Answer 3

Try:

$("#picViewer").fadeOut("slow", function(){
    document.getElementById("picViewer").src = "myImage.jpg";
    $("#picViewer").fadeIn("slow");
});

Answer 4

Animations happen asynchronously, so what you want to do is use the callback of the animation method:

$("#picViewer").fadeOut('slow', function () {
   //change image src
   //fadeIn
   ...

If by fade color you mean CSS colors, then unless you are using CSS3 transitions, you must use jQuery UI (or some other plugin) to animate color changes.