jQuery Dados - Método jQuery.queue()

Exemplo

Exibir o comprimento da fila:

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

Experimente pessoalmente

Definição e uso

O método queue() exibe ou opera a fila de funções executadas nos elementos correspondentes.

Notas:Este é um método de nível inferior; use .queue() Mais conveniente.

Sintaxe

.queue(queueName)
Parâmetros Descrição
queueName Opcional. Valor de string, contendo o nome da sequência. O padrão é fx, a sequência de efeitos padrão.

Operações na fila

O método queue() opera a fila de funções executadas nos elementos correspondentes.

Sintaxe

.queue(queueName,newQueue)
Parâmetros Descrição
queueName Opcional. Valor de string, contendo o nome da sequência. O padrão é fx, a sequência de efeitos padrão.

Descrição detalhada

Cada elemento pode ter uma a várias filas de funções adicionadas pelo jQuery. Em muitos aplicativos, é usado apenas uma fila (chamada fx). A fila chama seqüências de ações de forma assíncrona no elemento, sem interromper a execução do programa. Exemplos típicos incluem a chamada de vários métodos de animação no elemento. Por exemplo:

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

Quando esta instrução for executada, o elemento começará imediatamente sua animação de deslize, mas a transição de clareamento será colocada na fila fx e só será chamada após a conclusão da transição de deslize.

O método .queue() nos permite operar diretamente na fila de funções. A chamada do .queue() com função de callback é especialmente útil; ele permite que coloquemos uma nova função no final da fila.

Esta característica é semelhante àqueles fornecidos pelos métodos de animação com função de callback, mas não é necessário configurar uma função de callback durante a execução da animação.

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animação completa.');
  $(this).dequeue();
});;

É equivalente a:

$('#foo').slideUp(function() {
  alert('Animação completa.');
);

Atenção, quando adicionamos funções usando .queue(), devemos garantir que chamamos .dequeue() no final, para que a próxima função na fila possa ser executada.

Exemplo 1

Execute operações de fila em funções personalizadas:

$("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();
);

Experimente pessoalmente

Exemplo 2

Defina o array da fila para remover a fila:

$("#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();
);

Experimente pessoalmente