Question

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

有没有人知道如何正确同步它们？

这是我的代码：

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

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

Answer 1

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

Here's讨论主题。

Answer 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();

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

2 个答案: