2つのjQueryアニメーションを（適切に）同時に実行させる方法はありますか？

Question

私は2つのアニメーションアクションを呼び出すイベントリスナーを持っています。残念ながら、開始は少しずつずらされています（たとえば、関数の最初のものが最初に開始されます）。

誰かが正しく同期させる方法を知っていますか？最初のアニメーションが第二の少し前に実行されるため、それは全体の幅が少しファンキーに見えるれ、一時的に不平等になることを引き起こし、

$("#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ディスカッショントピックbtw。

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