CODEWITHSUNDEEP
jqueryanimationjquery-animateeach
user3351236
user3351236

Reputation: 2538

How start the animation only when another is completed?

I need to start the animation only when the other is completed? Here is what I have:

$( "div.line" ).each(function() {   
    $( this ).animate({
        height: "100%",
    }, 1000 );      
});

Upvotes: 1

Views: 80

Answers (4)

Alex
Alex

Reputation: 10216

Here's an example of how to properly use callbacks:

    $(function() {
    var els = $('div.line'),
            elsToAnim = els.length,
            animCounter = 0,
            animEls = function(index) {
                els.eq(index).stop().animate({
                    height: '100%'
                }, 500, function() {
                    animCounter++;
                    if (animCounter < elsToAnim) animEls(animCounter);
                });
            };

    animEls(animCounter);
});

fiddle

Upvotes: 0

Felix
Felix

Reputation: 38102

Beside delay(), you can also using setTimeout:

$( "div.line" ).each(function(i) {   
    setTimeout(function(){
       $(this).animate({
        height: "100%",
       }, 1000);
    },500 + ( i * 500 ));   
});

Upvotes: 0

JF it
JF it

Reputation: 2403

you can use Callback like this: 

$('.cellcontent').animate({
 height: '100%'
  },
  {
  duration: 1000,
  complete: function(){
    alert('call another animate function here');
}
});

Upvotes: 0

Anton
Anton

Reputation: 32581

Try using .delay()

$("div.line").each(function (i) {
    $(this).delay(i* 1000).animate({
        height: "100%",
    }, 1000);
});

DEMO

Upvotes: 6

Related Questions