Question

我有以下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);
}

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

Answer 1

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

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

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

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

Answer 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/

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

Answer 4

请勿使用超时，请使用完整的回调。

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

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

});

Answer 5

遵循kingjiv的说法，你应该使用complete回调链接这些动画。你几乎在你的第二个例子中有它，除了你用括号跟随它立即执行你的ShowDiv回调。将其设置为ShowDiv而不是ShowDiv()，它应该有效。

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

Answer 6

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

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

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

6 个答案: