JQuery stop (true, true) для перехода к завершению всех анимаций в очереди

Я использую метод jQuery stop(true, true), чтобы очистить анимацию запуска, поэтому следующий запустится немедленно. Я заметил, что первый параметр clearQueue очищает всю очередь анимации, а второй параметр ********* только перескакивает в конец текущей анимации, а не те, которые были удалены из очереди. Есть ли способ очистить его и перейти к концу всех анимаций в очереди?

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

$(this)
 .stop(false, true)
 .stop(false, true)
 .stop(false, true)
 .addClass('hover', 200);

Edit:

В итоге я добавил свой собственный метод, stopAll, согласно ответам Ates Goral:

$.fn.extend({ stopAll: function () {
 while (this.queue().length > 0)
 this.stop(false, true);
 return this;
 } });
$(this).stopAll().addClass('hover', 200);

Я надеюсь, что кто-то найдет это полезным.

5 ответов

jQuery 1.9 представил метод . finish(), который достигает именно этого.


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

while ($(this).queue().length) {
 $(this).stop(false, true);
}

Демо: http://jsfiddle.net/AB33X/


Вы можете использовать методы stop(), чтобы остановить запуск анимации.

// Stop running animation
$(".stop-btn").click(function(){
 $(".img").stop();
});

Подробнее @http://www.jquerypot.com/jquery-stop-animations/


Я также замечаю из документации метода .finish() в jQuery 1.9, что

Animations may be stopped globally by setting the property $.fx.off 
to true. When this is done, all animation methods will immediately 
set elements to their final state when called, rather than displaying an effect.

Существует также хорошая демонстрация различных методов на странице документации . finish().


Проверка наличия класса (установленного при наведении и удаления на mouseOut animate callback) перед тем, как смотреть новую анимацию. Когда начнется новая анимация, выполните деактивацию.

$("div").hover(function(){
 if (!$(this).hasClass('animated')) {
 $(this).dequeue().stop().animate({ width: "200px" });
 }
}, function() {
 $(this).addClass('animated').animate({ width: "100px" }, "normal", "linear", function() {
 $(this).removeClass('animated').dequeue();
 });
});

licensed under cc by-sa 3.0 with attribution.