Javascript 如何在下一个开始之前等待一个 jquery 动画完成？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6116597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wait for one jquery animation to finish before the next one begins?
提问by Abe Miessler
I have the following jQuery:
我有以下 jQuery：
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
My issue is that both happen at the same time. I would like the div2 animation to start when the first one finishes. I've tried the method below, but it does the same thing:
我的问题是两者同时发生。我希望 div2 动画在第一个动画完成时开始。我试过下面的方法，但它做同样的事情：
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
....
function ShowDiv(){
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
}
How can I make it wait for the first one to finish?
我怎样才能让它等待第一个完成？
回答by James Montagne
http://api.jquery.com/animate/
http://api.jquery.com/animate/
animate has a "complete" function. You should place the 2nd animation in the complete function of the first.
animate 具有“完整”功能。您应该将第二个动画放在第一个的完整功能中。
EDIT: example http://jsfiddle.net/xgJns/
编辑：示例http://jsfiddle.net/xgJns/
$("#div1").animate({opacity:.1},1000,function(){
$("#div2").animate({opacity:.1},1000);
});?
回答by Joaquin
$(function(){
$("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){
$("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000);
});
});
回答by Kevin
You can pass a function as parameter to the animate(..)function which is called after the animation completes. Like so:
您可以将函数作为参数传递给animate(..)动画完成后调用的函数。像这样：
$('#div1').animate({
width: 160
}, 200, function() {
// Handle completion of this animation
});
The example below is a clearer explanation of the parameters.
下面的例子是对参数的更清晰的解释。
var options = { },
duration = 200,
handler = function() {
alert('Done animating');
};
$('#id-of-element').animate(options, duration, handler);
回答by Patrick
Don't use a timeout, use the complete callback.
不要使用超时，使用完整的回调。
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
});
回答by Tomthepythonist
Following what kingjiv said, you should use the completecallback to chain these animations. You almost have it in your second example, except you're executing your ShowDiv callback immediately by following it with parentheses. Set it to ShowDivinstead of ShowDiv()and it should work.
按照 kingjiv 所说的，您应该使用complete回调来链接这些动画。您几乎可以在第二个示例中使用它，除了您通过括号紧跟它来立即执行 ShowDiv 回调。将其设置为ShowDiv而不是，ShowDiv()它应该可以工作。
mcgrailm's response (posted as I was writing this) is effectively the same thing, only using an anonymous function for the callback.
mcgrailm 的响应（在我写这篇文章时发布）实际上是同一件事，只是使用匿名函数进行回调。
回答by Brian Field
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function () {
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); });
This works for me. I'm not sure why your original code doesn't work. Maybe it needs to be incased in an anonymous function?
这对我有用。我不确定为什么您的原始代码不起作用。也许它需要嵌入匿名函数中？
