Есть ли способ заставить две анимации 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. Они создали несколько тестов , на которые вы, возможно, захотите взглянуть. Специально для теста Джонса.

Вот тема обсуждения, кстати.

Answer 2

Хитрость заключается в том, чтобы иметь один интервал / обратный вызов, в котором все элементы обновляются. Вы можете найти пример в моем посте здесь:

Можно ли реализовать обратный вызов с каждым шагом анимации в 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();