Очередь предстоящих функций

.queue()

Возвращает или изменяет (в зависимости от переданных параметров) очередь функций.

Дело в том, что к элементам страницы, jQuery привязывает одну или несколько очередей функций. Каждая функции в такой очереди, автоматически вызывается, когда завершится предыдущая. Функции, выполняющие анимационные эффекты, помещаются в такую очередь автоматически. Метод queue() позволяет получать и изменять очереди функций. Имеется два варианта его использования:

.queue([queueName]):jQuery1.2
Возвращает очередь функций (в виде массива), относящихся к выбранным элементам. С помощью необязательного параметра queueName можно указать имя очереди, которая должна быть возвращена. По умолчанию, это стандартная очередь "fx".
.queue([queueName], newQueue):jQuery1.2
Заменяет очередь с именем queueName, на newQueue. По умолчанию, будет заменена стандартная очередь "fx".
.queue([queueName], callback(next)):jQuery1.2
Устанавливает функцию callback в конец очереди. Для правильного функционирования очереди, в конце метода callback необходимо выполнять одну из двух операций: next(); или $(this).dequeue();. Эти операции нужны для запуска выполнения следующих элементов очереди


Рассмотрим простейший случай образования очереди:

$('#foo').slideUp().fadeIn(); // задаст элементу с идентификатором foo две анимации

в результате, элемент с идентификатором foo начнет выполнять эффект slideUp(), а метод, выполняющий эффект fadeIn() будет помещен в очередь и начнет свое выполнение только после завершения предшествующего метода.


В действии

Создадим очередь функций, выполняющих различные эффекты над div-элементами. После двух из них, установим свои функции (которые будут изменять цвет элемента), с помощью метода queue();:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.     div{ 
  6.       margin:3px; width:40px; height:40px;
  7.       position:absolute; left:0px; top:30px; 
  8.       background:green; display:none; 
  9.     }
  10.     div.newcolor{background:blue;}
  11.   </style>
  12.   <script src="//code.jquery.com/jquery-latest.min.js"></script>
  13. </head>
  14. <body>
  15.   Click here...
  16.   <div></div>
  17.   <script>
  18.     $(document.body).click(function () {
  19.       $("div").show("slow");                  // сделаем элемент видимым
  20.       $("div").animate({left:'+=200'},2000);  // переместим элемент на 200 пикселей правее
  21.       $("div").queue(function () {            // добавим новую функцию в очередь
  22.         $(this).addClass("newcolor");         // добавим класс элементу, за счет чего он изменит цвет
  23.         $(this).dequeue();                    // ! продолжим очередь !
  24.       });
  25.       $("div").animate({left:'-=200'},500);   // переместим элемент на 200 пикселей левее
  26.       $("div").queue(function (next) {        //добавим новую функцию в очередь
  27.         $(this).removeClass("newcolor");      // удалим класс у элемента, за счет чего он вернет прежний цвет
  28.         next();                               // ! продолжим очередь !
  29.       });
  30.       $("div").slideUp();                     // скроем элемент
  31.     });
  32.   </script>
  33. </body>
  34. </html>

В результате, после выполнения первых двух анимаций, заданных методами show() и animate() (строки 19 и 20), будет выполнена заданная нами функция, которая добавит новый класс элементам div. Затем, будет выполнена еще одна анимация (метод animate(), строка 25), после чего будет вызван еще один заданный нами метод, который удалит заданный нами класс у div-элементов.

Ссылки

Поисковые ключи:
  • очередь функций
  • .queue()
  • queue()