jQuery метод .finish()

jQuery эффекты

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

jQuery метод .finish() останавливает все выполняющиеся в настоящее время анимации, удаляет все очереди анимаций и завершает все анимации для выбранных элементов.


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


jQuery синтаксис:

Синтаксис 1.9:
// останавливает все выполняющиеся в настоящее время анимации
$( selector ).finish() 

// останавливает все выполняющиеся в настоящее время анимации с определенной очередью
$( selector ).finish( queue ) 

queue - String

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

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

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

1.9

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery методов .finish() и .stop()</title>
		<style></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" (клик левой кнопкой мыши):

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .finish() (остановка анимации с определенной очередью)</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  // функция выполняющая анимации элемента с классом first
	  function animateFirst() {
	    $( ".first" ).css( "width", "80px" ) // устанавливаем ширину элемента равную 80 пикселей
                         .animate({width: "30%"}, {duration: 2000, queue: "myAnimation"}) // анимируем увеличение ширины элемента до 30% за 2 секунды и устанавливаем имя очереди
                         .animate({width: "50%"}, {duration: 2000, queue: "myAnimation"}) // анимируем увеличение ширины элемента до 50% за 2 секунды и устанавливаем имя очереди
                         .animate({width: "70%"}, {duration: 2000, queue: "myAnimation"}) // анимируем увеличение ширины элемента до 70% за 2 секунды и устанавливаем имя очереди
                         .animate({width: "90%"}, {duration: 2000, queue: "myAnimation"});// анимируем увеличение ширины элемента до 90% за 2 секунды и устанавливаем имя очереди
	    $( ".first" ).dequeue( "myAnimation" ); // выполняем для выбранного элемента функцию из очереди под именем myAnimation
	  }

	  // функция выполняющая анимации элемента с классом second
	  function animateSecond() {
	    $( ".second" ).css( "width", "80px" ) // устанавливаем ширину элемента равную 80 пикселей
                         .animate({width: "30%"}, {duration: 2000, queue: "myAnimation2"}) // анимируем увеличение ширины элемента до 30% за 2 секунды и устанавливаем имя очереди
                         .animate({width: "50%"}, {duration: 2000, queue: "myAnimation2"}) // анимируем увеличение ширины элемента до 50% за 2 секунды и устанавливаем имя очереди
                         .animate({width: "70%"}, {duration: 2000, queue: "myAnimation2"}) // анимируем увеличение ширины элемента до 70% за 2 секунды и устанавливаем имя очереди
                         .animate({width: "90%"}, {duration: 2000, queue: "myAnimation2"});// анимируем увеличение ширины элемента до 90% за 2 секунды и устанавливаем имя очереди
	    $( ".second" ).dequeue( "myAnimation2" ); // выполняем для выбранного элемента функцию из очереди под именем myAnimation2
	  }

	  $( ".start" ).click(function(){ // задаем функцию при нажатии на элемент с классом start 
	    animateFirst();  // запускаем функцию
	    animateSecond(); // запускаем функцию
	  });
		
	  $( ".finish" ).click(function(){ // задаем функцию при нажатии на элемент с классом finish 
	    $( "div" ).finish( "myAnimation" ); // 
	    $( "div" ).finish( "myAnimation2" ); // 
	  });
		
	  $( ".finish2" ).click(function(){ // задаем функцию при нажатии на элемент с классом finish2 
	    $( "div" ).finish( "myAnimation" ); // 
	  });

	  $( ".finish3" ).click(function(){ // задаем функцию при нажатии на элемент с классом finish3 
	    $( "div" ).finish( "myAnimation2" ); // 
	  });
	});
		</script>
	</head>
	<body>
		<button class = "start">start</button>
		<button class = "finish">finish all queues</button>
		<button class = "finish2">finish("myAnimation")</button>
		<button class = "finish3">finish("myAnimation2")</button>
		<div class = "first"></div>
		<div class = "second"></div>
	</body>
</html>

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

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

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