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 multiple divs in a container div.and what i want to do is animate the 4 divs in following way :

1] Suppose if i have two divs, div1 and div2. when div1 is animated,and the animation is in progress the div2 animation should start.eg: when div1 is moving from left=200 to left=0 , the div2 animation should start when div1 is at left = 100.

Edit (Note:the number of divs are variable)

.......

When the current animation is in progress,and reaches a point the next animation should start (effect of animation is same of all divs).

2] While iterating a div collection and animating, delay the next animation for a given interval of time.

Is there any way to know start of animation? or animation is in progress?

Thanks all

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

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 3

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

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

etc.

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