Jquery animate when another animation is in progress

Question

Hi All,

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

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

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

Answer 3

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