jQuery данные - метод queue()

jQuery Данные Руководство по использованию

Пример

Отображение длины очереди:

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

Пробуйте сами

Определение и использование

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

Синтаксис

.queue(queueName)
Параметры Описание
queueName Опционально. Строка, содержащая имя последовательности. По умолчанию fx, стандартная последовательность эффектов.

Операции с очередью

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

Синтаксис

.queue(queueName,newQueue)
Параметры Описание
queueName Опционально. Строка, содержащая имя последовательности. По умолчанию fx, стандартная последовательность эффектов.

Подробное описание

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

$('#foo').slideUp().fadeIn();

Когда это предложение выполняется, элемент сразу же начинает свой анимационный спуск, но эффект fading поместен в очередь fx, и он будет вызван только после завершения спуска.

Метод .queue() позволяет нам напрямую управлять этой функцией очереди. Вызов .queue() с回调-функцией особенно полезен; он позволяет нам поместить новую функцию в конец очереди.

Эта функция аналогична回调-функции, предоставляемой методами анимации, но не требует установки回调-функции во время выполнения анимации.

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Анимация завершена.');
  $("this").dequeue();
});;

Эквивалентно:

$('#foo').slideUp(function() {
  alert('Анимация завершена.');
);

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

Пример 1

Выполните операции с очередью для пользовательских функций:

$("document.body").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $("this").addClass("newcolor");
    $("this").dequeue();
  });;
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $("this").removeClass("newcolor");
    $("this").dequeue();
  });;
  $("div").slideUp();
);

Пробуйте сами

Пример 2

Установите массив очереди для удаления очереди:

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $("this").addClass("newcolor");
    $("this").dequeue();
  );
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $("this").removeClass("newcolor");
    $("this").dequeue();
  );
  $("div").slideUp();
);
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
);

Пробуйте сами

jQuery Данные Руководство по использованию