如何让两个jQuery动画同时播放？答案

【问题标题】：How to make two jQuery animations play simultaneously?如何让两个jQuery动画同时播放？
【发布时间】：2011-09-15 18:52:04
【问题描述】：

在我的 jQuery 动画网站中发生了这两件事：

$('#myFirstDiv').animate({top: "15%"}, 3000); 
$('#mySecondDiv').animate({bottom: "15%"}, 3000);

这两个动画似乎一个接一个地发生，而不是同时发生。在第二个播放之前会有一点延迟，大约十分之一秒。我想让它们同时发生。

我试过这个：

$('#myFirstDiv').animate({top: "15%"}, 3000); 
$('#mySecondDiv').animate({bottom: "15%"}, {duration:3000, queue: false});

但它可能是错误的。

我会很感激有关如何正确执行此操作的建议。

【问题讨论】：

你能把你的代码扔到 jsFiddle.net 让我们测试一下吗？
当你说“它可能是错的”时，你的意思是“它不起作用”吗？
在这里按预期工作jsfiddle.net/niklasvh/gYTYN ?
谢谢尼克拉斯。有趣的。它确实按预期工作。也许我误解了什么。当这两个语句这样一个接一个的时候，他们不应该一个接一个地玩吗？我之所以问，是因为我的网站在第一个动画和第二个动画之间似乎确实有轻微的延迟。
@Abe 我正要这样做，但 Niklas 打败了我。

【解决方案1】：

您的代码应该可以正常工作。 jQuery 中的动画是异步的，这意味着如果你有两个动画调用，即使第一个动画仍在进行中，第二个动画也会在第一个动画之后被调用。如果在任何时候你想让第一个在第二个之前执行到最后，你的代码看起来像

$('#myFirstDiv').animate({top: "15%"}, 3000, function(){
  $('#mySecondDiv').animate({bottom: "15%"}, 3000);
});

【讨论】：