JQuery - Прерывание анимации?

Я использую jQuery для некоторых простых эффектов анимации, как только пользователь нажимает что-то. Однако, если они снова щелкнут до завершения первой анимации, ничего не произойдет. Они должны подождать, пока не закончится первая анимация.

Есть ли способ прервать процесс анимации и начать с нуля, когда происходит второй клик?

Спасибо.

Ответ 1

вы можете использовать метод stop()

HTML:

<input type="button" value="fade out" id="start">
<input type="button" value="stop" id="stop">
<div style="background-color: blue; height: 100px;">Testing</div>

JS:

$("#start").click(function() { $("div").fadeOut("slow"); });
$("#stop").click(function() { $("div").stop(); });

edit: Вышеупомянутый код протестирован и работает в FF3.5 и IE8

Используйте это для элемента, который вы хотели бы прервать анимацию.

Просто помните, что элемент остановит анимацию mid-animation. Поэтому вам может понадобиться reset CSS после остановки, в зависимости от ваших обстоятельств.

edit2: По состоянию на jQuery 1.7 появились некоторые обновления. Теперь вы можете группировать очереди анимаций с именами. Таким образом, метод stop() будет принимать логическое значение или строку в качестве первого параметра. Если это логическое значение, оно очистит/не очистит все очереди. Но если вы укажете строку, она очистит только анимации в этой группе очередей.

Ответ 2

вы можете просто остановить() перед повторной перезагрузкой анимации

$("#start").click(function() { $("div").stop().fadeOut("slow"); });

Ответ 3

Звучит как работа для dequeue.