只有在另一个完成时才开始动画？答案

【问题标题】：How start the animation only when another is completed?只有在另一个完成时才开始动画？
【发布时间】：2014-03-11 13:04:11
【问题描述】：

只有在另一个完成时才需要开始动画？这是我所拥有的：

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

【问题讨论】：

看看这个-stackoverflow.com/questions/3306747/…
stackoverflow.com/questions/8259361/…希望对你有帮助

标签： jquery animation jquery-animate each

【解决方案1】：

尝试使用.delay()

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

DEMO

【讨论】：

为什么不直接使用索引而不是变量？
@Karl-AndréGagnon 是的，我会更新答案，你

【解决方案2】：

你可以像这样使用回调：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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

【讨论】：