jQuery метод .clearQueue()

jQuery эффекты

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

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></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" (клик левой кнопкой мыши):

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

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