如何在下一个开始之前等待一个 jquery 动画完成？答案

【问题标题】：How to wait for one jquery animation to finish before the next one begins?如何在下一个开始之前等待一个 jquery 动画完成？
【发布时间】：2011-05-24 20:41:05
【问题描述】：

我有以下 jQuery：

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

我的问题是两者同时发生。我希望 div2 动画在第一个动画完成时开始。我尝试了下面的方法，但它做同样的事情：

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
....
function ShowDiv(){
   $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
}

如何让它等待第一个完成？

【问题讨论】：

标签： javascript jquery animation callback sequential

【解决方案1】：

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

animate 有一个“完整”的功能。您应该将第二个动画放在第一个的完整功能中。

编辑：例如http://jsfiddle.net/xgJns/

$("#div1").animate({opacity:.1},1000,function(){
    $("#div2").animate({opacity:.1},1000);    
});

【讨论】：

这不是我在第二个示例中所做的吗？
你的第二个例子实际上很接近。从第一行的ShowDiv 中删除()。您正在调用该函数而不是传递它。
啊！谢谢！如果需要，我将如何传递参数？
只需删除()就可以了，函数可以像任何其他变量一样传递，只是不要添加()，它将调用函数并传递返回值。跨度>
哦，是的，您只需将其包装在一个函数中，因此function(){ShowDiv('something')} 将是 animage 的第三个参数。

【解决方案2】：

$(function(){
    $("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){
    $("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000);
    });
});

http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/

【讨论】：

【解决方案3】：

您可以将函数作为参数传递给动画完成后调用的animate(..) 函数。像这样：

$('#div1').animate({
    width: 160
}, 200, function() {
    // Handle completion of this animation
});

下面的例子是对参数的更清晰的解释。

var options = { },
    duration = 200,
    handler = function() {
        alert('Done animating');
    };

$('#id-of-element').animate(options, duration, handler);

【讨论】：

【解决方案4】：

按照 kingjiv 所说的，您应该使用 complete 回调来链接这些动画。您几乎在第二个示例中就有了它，除了您通过在括号后面立即执行 ShowDiv 回调。将其设置为ShowDiv 而不是ShowDiv()，它应该可以工作。

mcgrailm 的响应（在我写这篇文章时发布）实际上是相同的，只是使用匿名函数进行回调。

【讨论】：

【解决方案5】：

不要使用超时，使用完整的回调。

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){

  $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

});

【讨论】：

【解决方案6】：

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function () {
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); });

这对我有用。我不确定为什么您的原始代码不起作用。也许它需要被装入匿名函数中？

【讨论】：