Question

我需要在另一个完成时启动动画吗？这就是我所拥有的：

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

Answer 1

尝试使用.delay()

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

DEMO

Answer 2

你可以像这样使用Callback：

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

Answer 3

除了 delay() ，您还可以使用 setTimeout ：

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

Answer 4

以下是如何正确使用回调的示例：

    $(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

如何在另一个完成时启动动画？

4 个答案: