Question

我有两个div想要制作动画：

<div id="character">
<div id="sprite">
</div>
</div>

$("#sprite").animate({"width" : "1", }, 400 );
$("#character").animate({"width" : "1", }, 400 );
$("#character").animate({"margin-left" : "0", }, 400 );

然而，似乎前两个动画同时执行，而第三个动画仅在其他动画完成时开始。

为什么前两个异步，而第三个不同步？如何让他们三个同时运行？

Answer 1

第二个$("#character").animate排队。如果您有2 $("#character")，则第二个仅在第一个完成时发生。你能做的是：

$("#character").animate({"margin-left" : "0", "width" : "1", }, 400 );

使两个动画同时发生，或者：

$("#character").animate({"width" : "1"}, {"duration":400, "queue": false});
$("#character").animate({"margin-left" : "0"}, {"duration":400, "queue": false});

Answer 2

尝试：

$("#sprite").animate({"width" : "1", }, 400 );
$("#character").animate({"width" : "1", }, 400 );
$("#character").animate({"margin-left" : "0", }, {duration:400, queue:false} );

否则jQuery会对动画进行排队，请参阅docs for animate

Answer 3

animate有一个可选的queue选项，告诉动画是否要添加到队列中。如果动画未排队，则会立即运行。每个元素都有自己的队列，因此$("#sprite")和$("#character")都有一个单独的动画队列。

如果您希望立即运行所有内容，请使用queue选项。如果您需要将所有内容排队到同一队列，则需要创建自己的队列。 http://api.jquery.com/queue/

jQuery动画 - 什么时候是异步的，什么时候不是？

3 个答案: