jQuery метод .clearQueue()

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

jQuery метод .clearQueue() по порядку удаляет из очереди все функции, которые еще не были выполнены.

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

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

jQuery синтаксис:

Синтаксис 1.2:
$( selector ).clearQueue() 
$( selector ).clearQueue( queueName ) // с указанием имени очереди

queueName - String

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

1.2

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

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

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

В этом примере мы рассмотрим использование методов .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>

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

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

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

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

jQuery эффекты