Прекращение текущей анимации

.stop()

Останавливает выполнение текущей анимации. Метод имеет один вариант использования:

.stop([clearQueue], [jumpToEnd]):jQuery1.2

Останавливает выполнение текущей анимации. После остановки анимации, следующая в очереди будет запущена автоматически, конечно, если очередь не пуста. Если необходимо остановить всю очередь, то необходимо указать true в параметре clearQueue.

По умолчанию, элемент останется в том положении, в котором он находился в момент вызова .stop(), а обработчик завершения анимации вызван не будет. Однако, если указать в параметре jumpToEnd значение true, то после остановки анимации, элемент примет состояние, которое он должен был принять по ее завершению. Кроме этого, будет вызван обработчик окончания анимации, конечно, если он был задан.

.stop([queue], [clearQueue], [jumpToEnd]):jQuery1.7

Эта версия метода отличается от предыдущей тем, что здесь, в первом параметре queue можно уточнить имя очереди, в которой необходимо остановить выполнение анимации.

До jQuery-1.7, переключаемые анимации, такие как .slideToggle() или .fadeToggle(), срабатывали неправильно, если несколько анимаций были запущены последовательно и предыдущая была прервана методом .stop(). В версии 1.7 это недостаток был исправлен и теперь перед запуском анимации начальные значения запоминаются, а при преждевременном прерывании переключаемой анимации происходит сброс значений.

Примеры

Рассмотрим простейший пример:

$('#foo').animate({left:'+=200'}, 2000); // перемещение элемента на 200 пикселей вправо, за 2 секунды
$('#foo').slideUp();  // сворачивание элемента
$('#foo').stop();

произойдет следующее: в начале, элементу с идентификатором foo будет задано два анимационных эффекта, пока первый из них будет выполняться, второй будет помещен в очередь. Но поскольку, к элементу foo будет также применен метод stop(), элемент прекратит движение вправо, и начнет следующую анимацию - сворачивание.


$('#foo').animate({left:'+=200'}, 2000); // перемещение элемента на 200 пикселей вправо, за 2 секунды
$('#foo').slideUp();  // сворачивание элемента
$('#foo').stop(true);

в данном случае, поскольку в методе stop, задан параметр clearQueue со значением true, кроме остановки текущей анимации, произойдет очищение очереди, поэтому сворачивания элемента не произойдет.


$('#foo').animate({left:'+=200'}, 2000); // перемещение элемента на 200 пикселей вправо, за 2 секунды
$('#foo').slideUp();  // сворачивание элемента
$('#foo').stop(true, true);

и наконец, вызов метода stop с параметром jumpToEnd равным true, приведет к тому, что элемент с идентификатором foo прекратит плавное движение вправо, и просто будет мгновенно перемещен в конечную точку — на 200 пикселей правее первоначального положения. А поскольку и clearQueue установлен как true, вторая анимация не запустится.

Ссылки

Поисковые ключи:
  • остановка анимации
  • остановить анимацию
  • завершить анимацию
  • .stop()
  • stop()