Jquery animate when another animation is in progress

Question

I\'m using a simple easing animation given here using JQUERY EASING PLUGIN
i.e.easing a div from left:200 to left:0 and back.(last example on above page)

I have

Answer 1

You can use the ':animated' pseudo-selector to find out if an element is currently in motion:

if ($('#div1').is(':animated')) {
    // do something
}

http://api.jquery.com/animated-selector/

You can also try the step option to check when div2 should start animate:

$('#div1').animate({
    left:0
},{
    step: function() {
        // check distance and animate div2 when it reaches 100
    }
});

http://api.jquery.com/animate/

Answer 2

You can use a function to manage the animation in one place.

setTimeout(doAnimate($div1),100);setTimeout(doAnimate($div2),200); 

etc.

Answer 3

The answer you are looking for lies in the "step" parameter.

You can define a step parameter which is called on a consistent basis across the span of the entire animation. At each step, you can check the progress of the animation and if it has hit the threshold you can trigger the second animation.

For instance:

$item1 = $("#myItem1");
$item2 = $("#myItem2");

$item1.animate({width: 500}, {
  duration: 1000,
  step: function(now, fx) {
    if (fx.state > 0.5 && fx.prop === "width") {
       if(!$item2.is(':animated')) // Make sure you didn't start the animation already
         $item2.animate({width: 500}, 1000);
    }
  }
})

This idea will work for any number of divs, although obviously you will have to take the concept and modify it to work with your case. Please let me know if this helps!

Read more about the step function here: http://api.jquery.com/animate/

Answer 4

You can add a callback to the animate function :

$('#div1').animate(
 { left: 0 },
 { duration: 'slow', easing: 'easeOutBack' },
 function(){
    //Do what you want in here, it will be executed once the animation above is completed.
)};