Esiste un modo per eseguire due animazioni jQuery (correttamente) contemporaneamente?

Question

Ho un listener di eventi che chiama due azioni di animazione. Sfortunatamente le loro partenze sono sfalsate di una piccola quantità (ad esempio, il primo nella funzione inizia per primo).

Qualcuno conosce un modo per sincronizzarli correttamente?

Ecco il mio codice:

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

Perché la prima animazione corre un po 'prima del secondo, che provoca la larghezza complessiva di diventare momentaneamente diseguale, che sembra un po' funky.

Answer 1

C'è stato un recente disaccordo su questo argomento esatto nella lista dev di jQuery. Hanno creato un few test cases che potresti voler vedere. Specially the Johns test.

Here's l'argomento di discussione btw.

Answer 2

Il trucco è di avere un singolo intervallo/callback in cui tutti gli elementi sono aggiornati. È possibile trovare un esempio nel mio post qui:

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

Che cosa si finisce è fondamentalmente:

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