CODEWITHSUNDEEP
javascriptjquery
bqui56
bqui56

Reputation: 2121

Why are all the iterations run at the same time?

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.

Upvotes: 5

Views: 166

Answers (3)

suresh gopal
suresh gopal

Reputation: 3156

Please try this:

We unable to use fadeIn() delay inside for loop.

instead we can use setInterval().

Please try following code.

var i;
var timeMgt;

$('#button').click(function(){
   i = 1;
   timeMgt = setInterval(ChangeImage,1000);
});

function ChangeImage()
{
    if(i<4)
    {
        $('#img' + i).fadeIn("slow").delay(1000);
        $('#img' + i).fadeOut("slow");
        i++;
    }
    else
    {
         window.clearInterval(timeMgt);
         return;
    }
}

Upvotes: 1

Platinum Azure
Platinum Azure

Reputation: 46203

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.

Upvotes: 7

dchhetri
dchhetri

Reputation: 7136

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);
  }
});​

Upvotes: 1

Related Questions