jQuery метод .queue()

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

jQuery метод .queue() отображает или манипулирует очередью функций, которые должны быть выполнены у выбранных элементов.

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

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

jQuery синтаксис:

Синтаксис 1.2:
// отображение очереди
$( selector ).queue() 
$( selector ).queue( queue ) 


// манипулирование очередью
$( selector ).queue( queue, newQueue ) 
$( selector ).queue( queue, callback( goNext ) ) 

queue - String
newQueue - Array
callback - Function( Function goNext )

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

1.2

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

Параметр	Описание
queue	Строковое значение, определяющее имя очереди, в которой необходимо остановить анимацию. По умолчанию используется очередь стандартных эффектов `fx`. Необязательный параметр.
newQueue	Массив функций для замены текущего содержимого очереди.
callback	Функция обратного вызова, которая добавляет в конец текущей очереди новую функцию. Функция принимает один аргумент, который позволяет выполнить метод .dequeu() на текущей функции для продолжения цепочки (необходим вызов внутри функции - `наименованиеАргумента()`). Вы можете запустить метод .dequeu() в ручную, поэтому аргумент не является обязательным. Функция обратного вызова выполняется один раз для каждого элемента в наборе jQuery.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .queue() (отображение очереди)</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 animate() {
	    $( "div" ).animate({width: "30%"}, 2000) // анимируем увеличение ширины элемента до 30% за 2 секунды
                      .animate({width: "50%"}, 2000) // анимируем увеличение ширины элемента до 50% за 2 секунды
                      .animate({width: "70%"}, 2000) // анимируем увеличение ширины элемента до 70% за 2 секунды
                      .animate({width: "90%"}, 2000, animate );// анимируем увеличение ширины элемента до 90% за 2 секунды и вызываем функцию по завершению
	  }
	  // функция отображающая длину очереди
	  function showQueueLength() {
	    var queueLength = ( $( "div" ).queue() ).length; // инициализируем пременную, содержащую длину очереди (параметр "fx" по умолчанию)
	    $( "div" ).text( "Длина очереди: " + queueLength ); // добавляем элементу текстовое содержимое
	    setTimeout( showQueueLength, 100 ); // запускаем функцию через 100 миллисекунд
	  }	  
	  animate(); // запускаем функцию
	  showQueueLength(); // запускаем функцию
	});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

В этом примере мы при загрузке документа запускаем следующие две функии:

Функция animate, которая с помощью методов .animate() поочередно запускает четыре различных анимации, которые увеличивают ширину элемента, длительностью 2 секунды каждая и по завершению четветртой вызываем функцию animate вновь.
Функция showQueueLength, которая с помощью метода .queue() получает длину очереди функций, которые должны быть выполнены у выбранных элементов <div>. Обратите внимание, что метод использовался без параметра (значение по умоланию "fx"). Затем с помощью метода .text() добавляем элементу <div> новое текстовое содержимое - значение, которое определяет длину очереди, и с помощью функции setTimeout запускаем функцию showQueueLength через 100 миллисекунд.

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .queue() (манипулирование очередью)</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 animate() {
	    $( "div" ).css( "width", "80px" ) // устанавливаем ширину элемента равную 80 пикселей
                      .animate({width: "30%"}, 2000) // анимируем увеличение ширины элемента до 30% за 2 секунды
                      .queue(function( go ) {
                        $( this ).css( "border-color", "violet" ); // устанавливаем цвет границ элемента				
                        go();   // добавляем в конец текущей очереди новую функцию (аналогично $(this).dequeue(), если без параметра
                      })
                      .animate({width: "50%"}, 2000) // анимируем увеличение ширины элемента до 50% за 2 секунды
                      .queue(function( go ) {
                        $( this ).css( "border-color", "green" ); // устанавливаем цвет границ элемента				
                        go();   // добавляем в конец текущей очереди новую функцию
                      })					  
                      .animate({width: "70%"}, 2000) // анимируем увеличение ширины элемента до 70% за 2 секунды
                      .queue(function( go ) {
                        $( this ).css( "border-color", "orange" ); // устанавливаем цвет границ элемента				
                        go();   // добавляем в конец текущей очереди новую функцию
                      })					  
                      .animate({width: "90%"}, 2000);// анимируем увеличение ширины элемента до 90% за 2 секунды
	  }

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

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

При нажатии на неё вызываем функцию, которая запускает функцию animate, которая с помощью методов .animate() поочередно запускает четыре различных анимации, которые увеличивают ширину элемента, длительностью 2 секунды каждая. Обратите внимание, что мы между методов .animate() используем методы .queue() благодаря которым манипулируем очередью функций, которые должны быть выполнены у выбранных элементов, изменяя при этом цвет границ элемента с помощью метода .css(). В качестве параметра метода .queue() передается функция, которая добавляет в конец текущей очереди новую функцию при вызове. Вы можете обойтись без этого параметра и вызывать метод .dequeue() напрямую - $( this ).dequeue().

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

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

Рассмотрим следующий пример в котором методу .queue() мы передадим новый массив функций:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .queue() (создание новой очереди)</title>
		<style>body {
	height: 250px; /* высота элемента */	
}
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 animateWidth() {
	    $( "div" ).animate({width: "30%"}, 500) // анимируем увеличение ширины элемента до 30% за пол секунды
                      .animate({width: "50%"}, 500) // анимируем увеличение ширины элемента до 50% за пол секунды
                      .animate({width: "70%"}, 500) // анимируем увеличение ширины элемента до 70% за пол секунды
                      .animate({width: "90%"}, 500, animateWidth );// анимируем увеличение ширины элемента до 90% за пол секунды и вызываем функцию по завершению
	  }
	  // функция выполняющая анимации элемента (изменение высоты)
	  function animateHeight() {
	    $( "div" ).animate({height: "30%"}, 500) // анимируем увеличение высоты элемента до 30% за пол секунды
                      .animate({height: "50%"}, 500) // анимируем увеличение высоты элемента до 50% за пол секунды
                      .animate({height: "70%"}, 500) // анимируем увеличение высоты элемента до 70% за пол секунды
                      .animate({height: "90%"}, 500, animateHeight );// анимируем увеличение высоты элемента до 90% за пол секунды и вызываем функцию по завершению
	  }	  
	  $( ".start" ).click(function(){ // задаем функцию при нажатии на элемент с классом start 
	    animateWidth() // запускаем функцию
	  });
	  $( ".new" ).click(function(){ // задаем функцию при нажатии на элемент с классом new 
	    var newQueue = [animateHeight]; // массив, содержащий одну функцию для замены текущего содержимого очереди 
	    $( "div" ).queue(  newQueue ); // изменяем текущее содержимое очереди (значение первого параметра по умолчанию "fx") 
	  });
	});
		</script>
	</head>
	<body>
		<button class = "start">start</button>
		<button class = "new">new queue</button>
		<div></div>
	</body>
</html>

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

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

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

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

jQuery эффекты