有没有办法让两个 jQuery 动画同时（正确）运行？答案

【问题标题】：Is there any way to make two jQuery animations run (properly) simultaneously?有没有办法让两个 jQuery 动画同时（正确）运行？
【发布时间】：2012-07-25 23:23:18
【问题描述】：

我有一个调用两个动画动作的事件监听器。不幸的是，它们的开始有少量错开（例如，函数中的第一个先开始）。

有人知道正确同步它们的方法吗？

这是我的代码：

$("#nav ul li a").hover(
    function(){
        $(lastBlock).children("div").animate({width: "0px"}, { queue:false, duration:400, easing:"swing" });
        $(this).children("div").animate({width: maxWidth+"px"}, { queue:false, duration:400, easing:"swing"});
        lastBlock = this;
    }
);

因为第一个动画在第二个之前运行，它会导致整体宽度暂时变得不相等，这看起来有点时髦。

【问题讨论】：

标签： javascript jquery animation

【解决方案1】：

最近在 jQuery 开发者列表上有一个关于这个确切主题的讨论。他们创建了一个few test cases 你可能想看看。 Specially the Johns test.

Here's讨论话题顺便说一句。

【讨论】：

通过跟进：它显示出很多希望，但目前有几个问题。

【解决方案2】：

诀窍是在其中更新所有元素的单个间隔/回调。您可以在我的帖子中找到一个示例：

Can I implement a callback with each animation step in jQuery?

你最终的结果基本上是：

var el1 = $("#element1");
var el2 = $("#element2");

var animation = new AnimationTimeline( {
    easing: "swing"
  , onstep: function( stepValue, animprops )
    {
      // This is called for every animation frame. Set the elements:
      el1.css( { left: ..., top: ... } );
      el2.css( { left: ..., top: ... } );
    }
  });

// And start it.
animation.start();

【讨论】：