dequeue()

посл. ред. 25.10.2016

Метод dequeue() используется для запуска следующей функции в очереди.

По умолчанию в jQuery используется стандартная очередь fx. При добавлении в неё первой функции автоматически происходит её запуск. Если создаётся другая очередь (не fx), тогда запуск первой функции в ней можно осуществить только с помощью метода dequeue().

Стандартные анимационные методы в jQuery (animate(), hide(), show() и т.д.) по окончании работы автоматически запускают следующую функцию в очереди. Если же в очередь вставлена пользовательская функция, тогда для запуска следующей функции необходимо использовать метод dequeue().

Варианты использования

jQ_object.dequeue([имя_очереди]) => jQuery: Удаляет из указаной очереди следующую функцию и запускает её. Если имя очереди не указано, тогда используется стандартная очередь fx. Метод выполняется для каждого элемента текущей выборки.

Примеры

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style>
    div {
      width: 50px;
      height: 50px;
      position: relative;
      background: coral;
    }
    .red {background: red;}
  </style>
</head>
<body>
  <button>Кнопка</button>
  <div></div>
</body>
</html>
 
<script>
$('button').on('click', function() {
  $('div')
    .animate({left: '+=150'}, 'slow')
    .queue(function() {
      $(this)
        .toggleClass('red')
        .dequeue(); 
    })
    .animate({left: '-=150'}, 'slow');
});
</script>

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button>Запустить 1 раз</button>
  <div style="width: 100px; height: 100px; position: relative; background: coral"></div>
</body>
</html>
 
<script>
$('div')
  .animate({left: '+=200', width: 'hide', height: 'hide'}, {delay: 'slow', queue: 'once'})
  .animate({left: '-=200', width: 'show', height: 'show'}, {delay: 'slow', queue: 'once'});
/* Для элемента DIV создана очередь из двух анимаций */

$('button').on('click', function() {
/* Запуск анимации для элемента DIV */
  $('div').dequeue('once');
});
</script>