Why are all the iterations run at the same time?

Question

Here's the jsfiddle simulating my problem relating to this code:

$('#button').click(function(){
   var i;
   for (i = 1; i < 4; ++i) {
      $('#img' + i).fadeIn("slow").delay(1000);
      $('#img' + i).fadeOut("slow");
   }
});

I was expecting the #img1 element to fade in and then for the execution to stop for 1 second and then fade out, then start over for the #img2 element etc.

Answer 1

The reason the animations appear to run at the same time is that jQuery's animations are all performed asynchronously. So what your code is doing is basically starting all of the animations, and then your browser handles the actual animations nearly simultaneously.

jQuery's animation functions do support the use of callbacks which are called after the animation is finished, however. By making sure that the later animations happen in this callback, we can force the animations to execute in sequence.

Here's one way you could implement your requirements (jsfiddle here):

$('#button').click(function(){
    var i;
    var $elems = [];
    for (i = 1; i < 4; ++i) {
        $elems.push($('#img' + i));
    }

    var animate = function () {
        var $elem;
        if ($elems.length) {
            $elem = $elems.shift();
            $elem.fadeIn("slow").delay(1000).fadeOut("slow", animate);
        }
        // if the $elems has been cleared out, we're done and this function won't be requeued
    };

    animate();
});

Note that I'm queuing up another call to animate() as the callback for .fadeOut. The function will then re-execute, but the state of the $elems array will be mutated across each function call so that each element has its animations executed once, in order. When the array is cleared out, the function will run only once more to verify that the elements have all been animated, and in that case it will return without re-queuing itself.

Answer 2

You would want to utilize the callbacks in fadeIn and fadeOut function. Here is an example http://jsfiddle.net/JaQmd/5/ .

The heart of the code is basically calling the callback with the new image number like so

var imageNumber = 0;

$('#button').click(function doAnimation() {
++imageNumber;
if(imageNumber <= 3){
   $("#img" + imageNumber).fadeIn('slow').delay(1000);
   $("#img" + imageNumber).fadeOut('slow', doAnimation);
  }
});​