jQuery Transit анимация перекрытия

Question

У меня проблема с перекрывающимися переходами - один переход начинается раньше, чем предыдущий завершается.

$obj.stop(true, false).transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  1500 );

Пример JsFiddle: http://jsfiddle.net/s4r88/18/.

Если вы наведете курсор на кнопки достаточно быстро, вы увидите, что анимация "переходит" к окончательным настройкам без перехода. Я пытался использовать методы.stop() и.clearQueue() безрезультатно.

Я знаю, что есть другие способы достижения этого (jQuery.animate(), написание статического css), но я думаю, что должен быть способ решить это в jQuery.transitions.

Есть идеи?

Answer 1

Переход jQuery по умолчанию будет связывать анимацию. Так что просто не используйте метод stop(), как в своем коде. На самом деле stop() не должен работать с transition ().

_$blackLine.transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  1500 );// without stop() method

http://jsfiddle.net/s4r88/24/

Предостережение заключается в том, что если вы наводите курсор на все меню, все анимации будут воспроизводиться одна за другой. В качестве идентификатора есть некоторые запросы / разветвления jQuery Transit, которые добавляют функцию stop(): https://github.com/rstacruz/jquery.transit/pulls

Answer 2

Это старая ветка, поэтому у вас может больше не быть этой проблемы, но для любого, кто приходит сюда с помощью поиска, ваша проблема - накапливать анимации и анимацию, которая слишком медленная.

Если вы избегаете stop() и просто используете clearQueue(), а затем уменьшаете время анимации с 1,5 секунд до 400 мс, проблема, похоже, решена.

_$blackLine.clearQueue().transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  400 );

Смотрите скрипку здесь: http://jsfiddle.net/2abg1cn5/