Y at-il un moyen de faire fonctionner deux animations jQuery (correctement) simultanément?

Question

J'ai un écouteur d'événement qui appelle deux actions d'animation. Malheureusement, leurs démarrages sont décalés d'une petite quantité (par exemple, le premier de la fonction commence en premier).

Est-ce que quelqu'un connaît un moyen de les synchroniser correctement?

Voici mon 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; 
    } 
); 

Parce que la première animation tourne un peu avant la seconde, il provoque la largeur totale de devenir momentanément inégale, ce qui ressemble un peu funky.

Answer 1

Il y a eu une récente discussion sur ce sujet précis dans la liste de dev jQuery. Ils ont créé un few test cases que vous pourriez vouloir regarder. Specially the Johns test.

Here's le sujet de discussion btw.

Answer 2

L'astuce consiste à avoir un seul intervalle/rappel dans lequel tous les éléments sont mis à jour. Vous pouvez trouver un exemple dans mon post ici:

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

Ce que vous finissez est essentiellement:

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