Gibt es eine Möglichkeit, zwei jQuery-Animationen gleichzeitig (richtig) auszuführen?

Question

Ich habe einen Ereignis-Listener, der zwei Animationsaktionen aufruft. Leider sind ihre Starts um einen kleinen Betrag versetzt (z.B. startet der erste in der Funktion zuerst).

Kennt jemand eine Möglichkeit, sie richtig zu synchronisieren?

Hier ist mein Code:

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

Da die erste Animation leicht vor dem zweiten läuft, ist es die Gesamtbreite verursacht vorübergehend ungleich werden, was ein bisschen flippig aussieht.

Answer 1

Es gab kürzlich eine Diskussion über dieses genaue Thema in der jQuery Dev-Liste. Sie haben eine few test cases erstellt, die Sie vielleicht sehen wollen. Specially the Johns test.

Here's das Diskussionsthema btw.

Answer 2

Der Trick besteht darin, ein einzelnes Intervall/Callback zu haben, in dem alle Elemente aktualisiert werden. Sie können ein Beispiel in meinem Beitrag finden Sie hier:

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

Was Sie am Ende im Grunde ist:

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