Прерывание последовательности анимаций при взаимодействии с пользователем

Question

У меня есть последовательность анимаций, которые, если пользователь не прерывает, должны заканчиваться до конца. Анимации реализованы с использованием задержек. Например

$element1.delay(1000).animate({left: 1000}, 5000); 
$element2.delay(2000).animate({left: 1000}, 5000); 
$element3.delay(3000).animate({left: 1000}, 5000); 
$element4.delay(4000).animate({left: 1000}, 5000); 

Причина Я делаю это так, потому что это, кажется интуитивно понятным для меня, как каждая анимация совершенно не зависит от времени других.

Предположим, что я хочу прервать анимацию с отметкой 2500 мс и после ее прерывания элементы должны перейти в конец состояния анимации. Теперь я попытался использовать функцию .stop (false, true) в .find (: анимированный) выбор. $ element1 и $ element2 действительно прерваны и переходят в конечное состояние, но поскольку $ element3 и $ element4 все еще находятся в фазе .delay, они не затрагиваются.

Что было бы лучшим и простейшим способом добиться эффекта, который я хочу? Спасибо

Answer 1

Я думаю, вы ищете недавно введенный метод finish(). Если вы установите аргумент jumpToEnd stop() в значение true, это повлияет только на обработанный в данный момент элемент в очереди. Но если вы вызовете finish(), он перейдет к окончательному результату всей очереди.

Fiddle: http://jsfiddle.net/SnTgS/

Finish() был введен в JQuery 1.9, но были некоторые ошибки позже исправлены в 1.10.1, так что вы можете использовать эту версию и новее.

http://api.jquery.com/finish/

В более ранних версиях JQuery я полагаю, вы могли бы цикл по длине очереди и вызвать stop(false, true) по каждому пункту в очереди.