Método queue() de dados jQuery

Manual de referência de dados jQuery

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() mostra ou opera na fila de funções executadas nos elementos correspondentes.

Sintaxe

.queue(queueName)
Parâmetros Descrição
queueName Opcional. Valor de string que contém o nome da seqüência. O padrão é fx, a seqüência de efeitos padrão.

Operar na fila

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

Sintaxe

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

Explicação detalhada

Cada elemento pode ter uma a várias filas de funções adicionadas pelo jQuery. Na maioria dos aplicativos, é usado apenas uma fila (chamada fx). A fila chama seqüências de ações no elemento de forma assíncrona, 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 deslizar, mas a transição de desvanecimento será colocada na fila fx e será chamada apenas após a conclusão da transição de deslizar.

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

Esta característica é semelhante às funções de callback fornecidas pelos métodos de animação, mas não é necessário definir um 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 através de .queue(), devemos garantir que chamamos .dequeue() no final, para que a próxima função da fila possa ser executada.

Exemplo 1

Realize 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 a matriz 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

Manual de referência de dados jQuery