stop()

47
посл. ред. 02.11.2016

Метод stop() останавливает выполнение текущей анимации. Работа метода зависит от передаваемых параметров.

Варианты использования

jQ_object.stop([имя_очереди, ][очистить_очередь, ][завершить_мгновенно]) => jQuery
Для каждого элемента текущей выборки останавливает выполнение текущей анимации. Может принимать 3 необязательных параметра.
имя_очереди
Название очереди, в которой необходимо остановить анимацию. Если имя очереди не указано, тогда используется стандартная очередь fx.
очистить_очередь
Булевый параметр, который определяет необходимость выполнения остальных эффектов в очереди:
  • true - отменить оставшиеся в очереди эффекты. Пользовательские функции не удаляются из очереди данным методом. Для полной очистки очереди используется метод clearQueue().
  • false - продолжить выполнение эффектов в очереди. Используется по умолчанию.
завершить_мгновенно
Булевый параметр, определяющий состояние элемента после остановки анимации:
  • true - завершить текущую анимацию мгновенно. В этом случае всем параметрам мгновенно будут присвоены конечные значения. Функция complete будет запущена. Для завершения всех анимаций используется метод finish().
  • false - оставить анимацию незавершённой. Значения параметров останутся такими, как были в момент вызова метода stop(), а функция complete не запустится. Используется по умолчанию.

Если метод stop() вызван во время скрытия элемента методами toggle, slideToggle или fadeToggle, тогда следующий вызов данных методов приведёт к восстановлению элемента, даже если он не был скрыт полностью.

Примеры

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button class="button_hide">Скрыть</button>
  <button class="button_show">Показать</button>
  <br>
  <button class="button_stop">Остановить</button>
  <button class="button_to_end">Завершить</button>
  <div style="width: 100px; height: 100px; background: coral; position: relative"></div>
</body>
</html>
 
<script>
$('.button_hide').on('click', function() {
  $('div').animate({width: 0}, 2000);
});
$('.button_show').on('click', function() {
  $('div').animate({width: 100}, 2000);
});
$('.button_stop').on('click', function() {
/* Остановить текущую анимацию и отменить остальные */
  $('div').stop(true);
});
$('.button_to_end').on('click', function() {
/* Мгновенно завершить текущую анимацию и запустить следующую */
  $('div').stop(false, true);
});
</script>

Пример совместной работы методов stop() и toggle():

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button>toggle()</button>
  <div style="width: 150px; height: 150px; background: coral; position: relative"></div>
</body>
</html>
 
<script>
$('button').on('click', function() {
  $('div')
    .stop()
    .toggle(1000);
});
</script>