jQuery анимация без повторов


jQuery анимация без повторов
Частенько бывает, что написав скрипт срабатывающий по определенному событию может зациклиться, если сделать это событие несколько раз подряд. И это неприятное событие очень может подпортить радость полученную в итоге.

Однако все гораздо проще чем кажется на первый взгляд, т.к. лечиться очень просто методом .stop()

Итак рассмотрим пример: нам нужно чтобы при клике на блок (‘.block‘) у нас всплывало окно (‘.window‘) и через некоторое время скрывалось. При том, нам нужно защитить себя от многочисленных кликов по этому блоку (‘.block‘), потому что иначе событие встанет в очередь и будет вызвано столько раз, сколько было щелчков по блоку.

Вот вариант решения задачи:

$('.block').click(function(){
    $('.window').stop(true,true).fadeIn(400).delay(200).fadeOut(400);
});

Что же тут происходит?
— клик по блоку (‘.block‘)
— используя метод .stop мы останавливаем все предыдущие события и начинаем новое
— далее выполняется цикл событий

Теперь остановимся более детально на методе .stop
Как говорит нам официальная документация:
.stop( [clearQueue] [, jumpToEnd] )

clearQueue
Логическое значение, указывающее на очищение очереди анимации. По умолчанию равно false.

jumpToEnd
Логическое значение, указывающее, следует ли завершить текущую анимацию сразу. По умолчанию равно false.

В итоге когда .stop() вызывается элементом, то анимация которая происходит в настоящий момент немедленно останавливается, и не ставиться в очередь а выполняется сначала.