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

Question

我有两个要设置动画的 div:

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

我在 jQuery 中调用 animate，如下所示:

$("#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});