JQuery animation when another animation runs

Question

I am using the simplicity of animation given here using JQUERY EASING PLUGIN
i.e. deleting a div from left: 200 left: 0 and back (last example on the page above)

I have multiple divs in a div container. And what I want to do is animate 4 divs as follows:

1] Suppose that if I have two divs, div1 and div2. when div1 is animated and the animation is done , div2 animation should start: when div1 moves left = 200 left = 0, div2 animation should start when div1 is left = 100.

Edit (Note: the number of divs is variable)

.......

When the current animation runs and reaches a point, the next animation should begin (the animation effect is the same for all divs).

2] During iteration of the collection of divs and animations, delay the next animation for a certain time interval.

Is there any way to find out the start of the animation? or is animation running?

Thank you all

Answer 1

You can use the pseudo-selector ": animated" to find out if the item is currently located:

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

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

You can also try the parameter stepto check when div2 should start the animation:

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

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

Answer 2

, , "".

, . , , .

:

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

div, , , . , , !

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

Answer 3

.

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

.

Answer 4

:

$('#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.
)};