How start the animation only when another is completed?

Question

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

Answer 1

Try using .delay()

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

DEMO

Answer 2

you can use Callback like this:

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

Answer 3

Beside delay(), you can also using setTimeout:

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

Answer 4

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