jQuery - прерывать анимацию?

Question

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

Есть ли способ прервать процесс анимации и начать с нуля при повторном щелчке?

Спасибо.

Answer 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

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

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

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

Answer 2

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

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

Answer 3

Похоже на работу для dequeue .