jQuery метод .dequeue()

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

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

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

jQuery синтаксис:

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

queueName - String

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

1.2

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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery методов .dequeue() и .stop()</title>
		<style>div {
	width: 80px; /* ширина элемента */	
	height: 80px; /* высота элемента */	
	border: 2px solid red; /* сплошная граница размером 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(){
	  
	  first(); // вызываем функцию при загрузке документа (добавляем анимацию в очередь)
	  second(); // вызываем функцию при загрузке документа (добавляем анимацию в очередь)

	  $( ".first" ).dequeue( "myElement" ); // выполняем для выбранного элемента функцию из очереди под именем myElement
	  $( ".second" ).dequeue( "myElement2" ); // выполняем для выбранного элемента функцию из очереди под именем myElement2
	  
	  // функция выполняющая анимацию элемента бесконечно в цикле
	  function first() {  
	    $( ".first" ).animate({ width: "90%"}, { // анимируем увеличение ширины элемента
	      queue: "myElement", // задаем имя очереди
	      duration: 1000, // длительность анимации в миллисекундах
	      complete: function(){ // функция будет выполнена после завершения анимации
	        $( this ).animate({ width: "80px"}, { // анимируем уменьшение ширины элемента
	          queue: "myElement", // задаем имя очереди
	          complete: function(){ // функция будет выполнена после завершения анимации
	            first(); // вызываем функцию (добавляем анимацию в очередь)
	            $( ".first" ).dequeue( "myElement" ); // выполняем для выбранного элемента функцию из очереди под именем myElement
	          }
	        })
	      }
	    })
	  };
		
	  // функция выполняющая анимацию элемента бесконечно в цикле
	  function second() {  
	    $( ".second" ).animate({ width: "90%"}, { // анимируем увеличение ширины элемента
	      queue: "myElement2", // задаем имя очереди
	      duration: 1000, // длительность анимации в миллисекундах
	      complete: function(){ // функция будет выполнена после завершения анимации
	        $( this ).animate({ width: "80px"}, { // анимируем уменьшение ширины элемента
	          queue: "myElement2", // задаем имя очереди
	          complete: function(){ // функция будет выполнена после завершения анимации
	            second(); // вызываем функцию (добавляем анимацию в очередь)
	            $( ".second" ).dequeue( "myElement2" ); // выполняем для выбранного элемента функцию из очереди под именем myElement2
	          }
	        })
	      }
	    })
	  };

	  $( ".first" ).click(function(){ // задаем функцию при нажатии на элемент с классом first 
	    if( $( this ).is( ":animated" ) ) { // проверяем анимируется ли в настоящее время элемент
	      return // если да, то выходим из функции
	    } else { // если нет, то
	      first(); // вызываем функцию (добавляем анимацию в очередь)
	      $( ".first" ).dequeue( "myElement" ); // выполняем для выбранного элемента функцию из очереди под именем myElement
	    }
	  });

	  $( ".second" ).click(function(){ // задаем функцию при нажатии на элемент с классом second 
	    if( $( this ).is( ":animated" ) ) { // проверяем анимируется ли в настоящее время элемент
	      return // если да, то выходим из функции
	    } else { // если нет, то
	      second(); // вызываем функцию (добавляем анимацию в очередь)
	      $( ".second" ).dequeue( "myElement2" ); // выполняем для выбранного элемента функцию из очереди под именем myElement2
	    }
	  });

	  $( ".stop" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop 
	    $( "div" ).stop( "myElement" ); // останавливаем анимацию у выбранных элементов <div> у которых имя очереди анимации myElement
	  });

	  $( ".stop2" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop2 
	    $( "div" ).stop( "myElement2" ); // останавливаем анимацию у выбранных элементов <div> у которых имя очереди анимации myElement2
	  });

	  $( ".stop3" ).click(function(){ // задаем функцию при нажатии на элемент с классом stop3  
	    $( "div" ).stop(); // останавливаем анимацию у выбранных элементов <div>
	  });
	});
		</script>
	</head>
	<body>
		<button class = "stop">stop first</button>
		<button class = "stop2">stop second</button>
		<button class = "stop3">stop all</button>
		<div class = "first">first</div>
		<div class = "second">second</div>
	</body>
</html>

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

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

При нажатии на элемент с классом stop вызываем функцию, которая с помощью метода .stop() останавливает анимацию у выбранных элементов <div> у которых имя очереди анимации myElement.
При нажатии на элемент с классом stop2 вызываем функцию, которая с помощью метода .stop() останавливает анимацию у выбранных элементов <div> у которых имя очереди анимации myElement2.
При нажатии на элемент с классом stop3 вызываем функцию, которая с помощью метода .stop() останавливает анимацию у всех выбранных элементов <div>.

Для возможности возобновления анимации (в этом примере анимация всегда возобновляется с увеличения элемента) мы задали функции, которые срабатывают при нажатии на конкретный элемент <div>. Обратите внимание, что при нажатии на элемент происходит проверка того анимируется ли элемент в настоящее время.

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

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

jQuery эффекты