jQuery метод .stop()

Определение и применение

jQuery метод .stop() позволяет остановить выполняемую анимацию у выбранных элементов.

Обращаю Ваше внимание, что вы можете остановить все анимации глобально, для этого необходимо установить свойство глобального объекта $.fx.off в логическое значение true. Когда это будет сделано, все методы анимации немедленно установят элементы в их окончательное состояние при вызове (без отображения эффекта анимации).

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

jQuery синтаксис:

Синтаксис 1.2:
$( selector ).stop( clearQueue, jumpToEnd ) 

Синтаксис 1.7:
$( selector ).stop( queue, clearQueue, jumpToEnd ) 

queue - String
clearQueue - Boolean
jumpToEnd - Boolean

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

Если параметр jumpToEnd имеет значение true, то текущая анимация останавливается и элементу немедленно присваиваются значения для каждого свойства CSS, которые были бы на момент завершения этой анимации.

Начиная с версии jQuery 1.7, если первый параметр задан в виде строки, то будет остановлена только та анимация в очереди, которая соответствует этой строке. Вы можете ознакомиться с подобным примером ниже.

Добавлен в версии jQuery

1.2 (синтаксис обновлен в версии 1.7)

Значения параметров

Параметр	Описание
queue	Строковое значение, определяющее имя очереди, в которой необходимо остановить анимацию. По умолчанию используется очередь стандартных эффектов `fx`. Необязательный параметр.
clearQueue	Логическое значение, которое определяет следует ли удалить последующие анимации, находящиеся в очереди. Значение по умолчанию false. Необязательное значение.
jumpToEnd	Логическое значение, которое определяет следует ли немедленно завершить текущую анимацию. Значение по умолчанию false. Необязательное значение.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .stop()</title>
		<style>div {
	width: 80px; /* ширина элемента */	
	height: 80px; /* высота элемента */	
	border: 2px solid blue; /* сплошная граница размером 2 пикселя синего цвета */	
	margin-top: 50px; /* внешний отступ от верхнего края элемента */
	position: absolute; /* элемент с абсолютным позиционированием */		
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".fwd" ).click(function(){ // задаем функцию при нажатии на элемент с классом fwd 
	    $( "div" ).animate({left: "+=200px"}, 3500); // анимируем смещение элемента относительно документа
	  });
	  $( ".back" ).click(function(){ // задаем функцию при нажатии на элемент с классом back 
	    $( "div" ).animate({left: "-=200px"}, 3500); // анимируем смещение элемента относительно документа
	  });
	  $( ".stop" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop 
	    $( "div" ).stop(); // останавливаем анимацию у выбранных элементов <div>
	  });		
	});
		</script>
	</head>
	<body>
		<button class = "fwd">Вперед</button>
		<button class = "back">Назад</button>
		<button class = "stop">Стоп</button>
		<div></div>
	</body>
</html>

В этом примере мы разместили в документе три кнопки (элементы <button>), для каждой назначили обработчик события "click" (клик левой кнопкой мыши):

При нажатии на элемент с классом fwd вызываем функцию, которая с помощью метода .animate() анимирует смещение элемента относительно документа (увеличивают значение CSS свойства left, прибавляя к текущему значению 200 пикселей, за счет чего элемент смещается вправо).
При нажатии на элемент с классом back вызываем функцию, которая с помощью метода .animate() анимирует смещение элемента относительно документа (уменьшает значение CSS свойства left, вычитая от текущего значения 200 пикселей, за счет чего элемент смещается влево).
При нажатии на элемент с классом stop вызываем функцию, которая с помощью метода .stop() позволяет остановить выполняемую анимацию у выбранных элементов <div> в документе.

Результат нашего примера:

Пример использования jQuery метода .stop()

Рассмотрим следующий пример в котором мы сравним использование методов .stop() и .finish():

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery методов .finish() и .stop()</title>
		<style>div {
	width: 80px; /* ширина элемента */	
	height: 80px; /* высота элемента */	
	border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */	
	margin-top: 50px; /* внешний отступ от верхнего края элемента */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  // функция выполняющая анимации элемента
	  function first() {
	    $( "div" ).css( "width", "80px" ) // устанавливаем ширину элемента равную 80 пикселей
                      .animate({width: "30%"}, 2000) // анимируем увеличение ширины элемента до 30% за 2 секунды
                      .animate({width: "50%"}, 2000) // анимируем увеличение ширины элемента до 50% за 2 секунды
                      .animate({width: "70%"}, 2000) // анимируем увеличение ширины элемента до 70% за 2 секунды
                      .animate({width: "90%"}, 2000);// анимируем увеличение ширины элемента до 90% за 2 секунды
	  }
	  
	  $( ".start" ).click(function(){ // задаем функцию при нажатии на элемент с классом start 
	    first() // запускаем функцию
	  });
		
	  $( ".finish" ).click(function(){ // задаем функцию при нажатии на элемент с классом finish 
	    $( "div" ).finish(); // останавливаем все выполняющиеся в настоящее время анимации, удаляем все очереди анимаций, и завершаем все анимации 
	  });
		
	  $( ".stop" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop 
	    $( "div" ).stop(); // останавливаем выполняемую анимацию
	  });

	  $( ".stop2" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop2 
	    $( "div" ).stop( true, true ); // останавливаем все выполняющиеся в настоящее время анимации, удаляем все очереди анимаций, и завершаем все анимации 
	  });
	});
		</script>
	</head>
	<body>
		<button class = "start">start</button>
		<button class = "finish">finish()</button>
		<button class = "stop">stop()</button>
		<button class = "stop2">stop( true, true )</button>
		<div></div>
	</body>
</html>

В этом примере мы разместили в документе один элемент <div> и четыре кнопки (элементы <button>), для каждой назначили обработчик события "click" (клик левой кнопкой мыши):

При нажатии на элемент с классом start вызываем функцию, которая запускает функцию first(), которая выполняет анимации элемента <div>. Функция с помощью метода .css() устанавливает элементу первоначальную ширину, заданную в стилях, это необходимо для возможности перезапуска анимации, затем с помощью методов .animate() поочередно запускает четыре различных анимации, которые увеличивают ширину элемента, длительностью 2 секунды каждая.
При нажатии на элемент с классом finish вызываем функцию, которая с помощью метода .finish() останавливает все выполняющиеся в настоящее время анимации, удаляет все очереди анимаций и завершает все анимации у выбранного элемента <div>. Обратите внимание на важный момент, метод .finish() также устанавливает все CSS свойства для всех анимаций в очереди к их конечным значениям, в результате элемент получит значение ширины равное 90%.
При нажатии на элемент с классом stop вызываем функцию, которая с помощью метода .stop() останавливает текущую анимацию у выбранного элемента <div>, следующая анимация в очереди при этом начинает проигрываться.
При нажатии на элемент с классом stop2 вызываем функцию, которая с помощью метода .stop() останавливает все выполняющиеся в настоящее время анимации, удаляет все очереди анимаций и завершает все анимации у выбранного элемента <div>. Это аналогично использованию метода finish, за тем исключением, что CSS свойства не устанавливаются к их конечным значениям.

Результат нашего примера:

Пример использования jQuery методов .finish() и .stop()

Рассмотрим следующий пример в котором с помощью метода .stop() мы будем останавливать элемент в зависимости от его имени очереди:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .stop() (остановка элемента с определенной очередью)</title>
		<style>div {
	width: 80px; /* ширина элемента */	
	height: 80px; /* высота элемента */	
	border: 2px solid red; /* сплошная граница размером 2 пикселя красного цвета */	
	margin-top: 50px; /* внешний отступ от верхнего края элемента */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  
	  first(); // вызываем функцию при загрузке документа (добавляем анимацию в очередь)
	  second(); // вызываем функцию при загрузке документа (добавляем анимацию в очередь)

	  $( ".first" ).dequeue( "myElement" ); // выполняем для выбранного элемента функцию из очереди под именем myElement
	  $( ".second" ).dequeue( "myElement2" ); // выполняем для выбранного элемента функцию из очереди под именем myElement2
	  
	  // функция выполняющая анимацию элемента бесконечно в цикле
	  function first() {  
	    $( ".first" ).animate({ width: "90%"}, { // анимируем увеличение ширины элемента
	      queue: "myElement", // задаем имя очереди
	      duration: 1000, // длительность анимации в миллисекундах
	      complete: function(){ // функция будет выполнена после завершения анимации
	        $( this ).animate({ width: "80px"}, { // анимируем уменьшение ширины элемента
	          queue: "myElement", // задаем имя очереди
	          complete: function(){ // функция будет выполнена после завершения анимации
	            first(); // вызываем функцию (добавляем анимацию в очередь)
	            $( ".first" ).dequeue( "myElement" ); // выполняем для выбранного элемента функцию из очереди под именем myElement
	          }
	        })
	      }
	    })
	  };
		
	  // функция выполняющая анимацию элемента бесконечно в цикле
	  function second() {  
	    $( ".second" ).animate({ width: "90%"}, { // анимируем увеличение ширины элемента
	      queue: "myElement2", // задаем имя очереди
	      duration: 1000, // длительность анимации в миллисекундах
	      complete: function(){ // функция будет выполнена после завершения анимации
	        $( this ).animate({ width: "80px"}, { // анимируем уменьшение ширины элемента
	          queue: "myElement2", // задаем имя очереди
	          complete: function(){ // функция будет выполнена после завершения анимации
	            second(); // вызываем функцию (добавляем анимацию в очередь)
	            $( ".second" ).dequeue( "myElement2" ); // выполняем для выбранного элемента функцию из очереди под именем myElement2
	          }
	        })
	      }
	    })
	  };

	  $( ".first" ).click(function(){ // задаем функцию при нажатии на элемент с классом first 
	    if( $( this ).is( ":animated" ) ) { // проверяем анимируется ли в настоящее время элемент
	      return // если да, то выходим из функции
	    } else { // если нет, то
	      first(); // вызываем функцию (добавляем анимацию в очередь)
	      $( ".first" ).dequeue( "myElement" ); // выполняем для выбранного элемента функцию из очереди под именем myElement
	    }
	  });

	  $( ".second" ).click(function(){ // задаем функцию при нажатии на элемент с классом second 
	    if( $( this ).is( ":animated" ) ) { // проверяем анимируется ли в настоящее время элемент
	      return // если да, то выходим из функции
	    } else { // если нет, то
	      second(); // вызываем функцию (добавляем анимацию в очередь)
	      $( ".second" ).dequeue( "myElement2" ); // выполняем для выбранного элемента функцию из очереди под именем myElement2
	    }
	  });

	  $( ".stop" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop 
	    $( "div" ).stop( "myElement" ); // останавливаем анимацию у выбранных элементов <div> у которых имя очереди анимации myElement
	  });

	  $( ".stop2" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop2 
	    $( "div" ).stop( "myElement2" ); // останавливаем анимацию у выбранных элементов <div> у которых имя очереди анимации myElement2
	  });

	  $( ".stop3" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop3  
	    $( "div" ).stop(); // останавливаем анимацию у выбранных элементов <div>
	  });
	});
		</script>
	</head>
	<body>
		<button class = "stop">stop first</button>
		<button class = "stop2">stop second</button>
		<button class = "stop3">stop all</button>
		<div class = "first">first</div>
		<div class = "second">second</div>
	</body>
</html>

В этом примере мы разместили в документе два элемента <div>, которым с помощью метода .animate() анимируем увеличение и уменьшение ширины элемента бесконечно в цикле с помощью функций обратного вызова. Отличие между анимациями заключается только в том, что для элементов назначаются различные имена очередей. Обратите внимание на важный момент, что когда анимации назначается имя очереди, то она не запускается в автоматическом режиме, а запускается с помощью метода .dequeue(), который мы использовали при загрузке документа, после того как были вызваны функции, которые добавили наши анимации в очередь.

Кроме того, мы разместили в документе три кнопки (элементы <button>), для каждой назначили обработчик события "click" (клик левой кнопкой мыши):

При нажатии на элемент с классом stop вызываем функцию, которая с помощью метода stop() останавливает анимацию у выбранных элементов <div> у которых имя очереди анимации myElement.
При нажатии на элемент с классом stop2 вызываем функцию, которая с помощью метода stop() останавливает анимацию у выбранных элементов <div> у которых имя очереди анимации myElement2.
При нажатии на элемент с классом stop3 вызываем функцию, которая с помощью метода stop() останавливает анимацию у всех выбранных элементов <div>.

Для возможности возобновления анимации (в этом примере анимация всегда возобновляется с увеличения элемента) мы задали функции, которые срабатывают при нажатии на конкретный элемент <div>. Обратите внимание, что при нажатии на элемент происходит проверка того анимируется ли элемент в настоящее время.

Результат нашего примера:

Пример использования jQuery метода .stop() (остановка элемента с определенной очередью)

В этом примере мы рассмотрим использование методов .clearQueue() и .stop():

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery методов .clearQueue() и .stop()</title>
		<style>div {
	width: 80px; /* ширина элемента */	
	height: 80px; /* высота элемента */	
	border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */	
	margin-top: 50px; /* внешний отступ от верхнего края элемента */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  // функция выполняющая анимации элемента
	  function first() {
	    $( "div" ).css( "width", "80px" ) // устанавливаем ширину элемента равную 80 пикселей
                      .animate({width: "30%"}, 2000) // анимируем увеличение ширины элемента до 30% за 2 секунды
                      .animate({width: "50%"}, 2000) // анимируем увеличение ширины элемента до 50% за 2 секунды
                      .animate({width: "70%"}, 2000) // анимируем увеличение ширины элемента до 70% за 2 секунды
                      .animate({width: "90%"}, 2000);// анимируем увеличение ширины элемента до 90% за 2 секунды
	  }
	  
	  $( ".start" ).click(function(){ // задаем функцию при нажатии на элемент с классом start 
	    first() // запускаем функцию
	  });
		
	  $( ".clear" ).click(function(){ // задаем функцию при нажатии на элемент с классом clear 
	    $( "div" ).clearQueue(); // по порядку удаляем из очереди все функции, которые еще не были выполнены 
	  });
		
	  $( ".stop" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop 
	    $( "div" ).stop( true ); // останавливаем все выполняющиеся в настоящее время анимации и удаляем все очереди анимаций
	  });

	  $( ".stop2" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop2 
	    $( "div" ).stop( true, true ); // останавливаем все выполняющиеся в настоящее время анимации, удаляем все очереди анимаций, и завершаем все анимации 
	  });
	});
		</script>
	</head>
	<body>
		<button class = "start">start</button>
		<button class = "clear">clearQueue()</button>
		<button class = "stop">stop(true)</button>
		<button class = "stop2">stop( true, true )</button>
		<div></div>
	</body>
</html>

При нажатии на элемент с классом start вызываем функцию, которая запускает функцию first(), которая выполняет анимации элемента <div>. Функция с помощью метода .css() устанавливает элементу первоначальную ширину, заданную в стилях, это необходимо для возможности перезапуска анимации, затем с помощью методов .animate() поочередно запускает четыре различных анимации, которые увеличивают ширину элемента, длительностью 2 секунды каждая.
При нажатии на элемент с классом clear вызываем функцию, которая с помощью метода .clearQueue() по порядку удаляем из очереди все функции, которые еще не были выполнены (анимации у выбранного элемента <div>).
При нажатии на элемент с классом stop вызываем функцию, которая с помощью метода .stop() останавливает все выполняющиеся в настоящее время анимации и удаляет все очереди анимаций у выбранного элемента <div>. Обратите внимание, что в отличие от метода .clearQueue() текущая анимация не проигрывается, а немедленно останавливается.
При нажатии на элемент с классом stop2 вызываем функцию, которая с помощью метода .stop() оостанавливает все выполняющиеся в настоящее время анимации, удаляет все очереди анимаций и завершает все анимации у выбранного элемента <div>. Это аналогично использованию метода .finish(), за тем исключением, что CSS свойства не устанавливаются к их конечным значениям.

Результат нашего примера:

Пример использования jQuery методов .clearQueue() и .stop()

jQuery эффекты