Можно ли запустить две анимации jQuery (правильно) одновременно?

Question

У меня есть прослушиватель событий, который вызывает два анимационных действия. К сожалению, их старты расположены в шахматном порядке на небольшое количество (например, первое в функции начинается первым).

Кто-нибудь знает, как правильно их синхронизировать?

Вот мой код:

$("#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 Тема обсуждения кстати.

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