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); }
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(); );
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(); );