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

jQuery данные руководства

Пример

Показать длину очереди:

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

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

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

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

Комментарий:Это метод низкого уровня; используйте .queue() Более удобные.

Грамматика

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

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

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

Грамматика

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

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

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

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

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

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

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

$('#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 данные руководства