¿Hay alguna manera de hacer que dos animaciones jQuery se ejecuten (correctamente) simultáneamente?

Question

Tengo un detector de eventos que llama a dos acciones de animación. Desafortunadamente, sus inicios están escalonados en una pequeña cantidad (por ejemplo, el primero en la función comienza primero).

¿Alguien sabe una manera de sincronizarlos correctamente?

Aquí está mi código:

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

Debido a que la primera animación se ejecuta un poco antes de la segunda, hace que la anchura total se convierta en un momento desigual, que se parece un poco raro.

Answer 1

Hubo un debate reciente sobre este tema exacto en la lista de desarrolladores jQuery. Crearon un few test cases que quizás quieras mirar. Specially the Johns test.

Here's el tema de debate btw.

Answer 2

El truco es tener un solo intervalo/devolución de llamada en el que se actualicen todos los elementos. Puede encontrar un ejemplo en mi post aquí:

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

lo que terminan es básicamente:

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