jQuery метод .queue()

jQuery эффекты

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

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></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>

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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .queue() (манипулирование очередью)</title>
		<style></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() (манипулирование очередью)
Пример использования jQuery метода .queue() (манипулирование очередью)

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

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

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

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