Método queue

O método queue nos permite trabalhar com a fila de funções associadas a um elemento. Veja também o método clearQueue, que nos permite remover da fila todas as funções que não foram executadas.

Sintaxe

Assim mostramos a fila de funções em execução, associadas ao elemento. Podemos passar um parâmetro opcional com o nome da fila em forma de string (por padrão fx - a fila padrão de efeitos):

.queue([nome da fila]);

Podemos manipular a fila. É executado uma vez para cada elemento. Para isso, podemos passar como segundo parâmetro um array de funções, que substituirá o conteúdo da fila atual:

.queue([nome da fila], nova fila );

Ou podemos passar como segundo parâmetro uma nova função de callback para adicionar à fila. Esta função, por sua vez, recebe outra função como parâmetro. Isso permite remover automaticamente o próximo item da fila e avançar a fila:

.queue([nome da fila], função de callback(next) {
	next();
});

Cada elemento pode ter uma ou várias filas. Em muitas aplicações, usa-se apenas uma (fx). As filas permitem realizar sequências de ações com o elemento de forma assíncrona, sem interromper a execução do programa. A chamada queue com uma função de callback nos permite colocar uma nova função no final da fila. A função de callback é executada uma vez para cada elemento no conjunto. Ao adicionar uma função com queue, devemos garantir que posteriormente o método dequeue seja chamado, para que a próxima função na cadeia funcione.

Exemplo

Vamos adicionar uma função personalizada. Primeiro, após clicar em #animate, vamos mostrar um quadrado vermelho, que se moverá para a direita por 2s, depois, usando queue, vamos adicionar uma função personalizada que recolore o quadrado para verde, adicionando a classe newcolor. Como pode ver, em seguida, é chamado dequeue para remover a função da fila. Depois, nosso quadrado se moverá para a esquerda por meio segundo e será recolorido de volta para vermelho - usando a segunda função personalizada, removemos a classe newcolor. Ao final da animação, recolhemos nosso quadrado:

<button id="animate">start</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}

div.newcolor {
	background: green;
}

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

Exemplo

Vamos adicionar uma fila em forma de array para remover a anterior. Ao clicar no botão #start, veremos a animação do exemplo anterior. Ao clicar no botão #stop, vamos parar a animação adicionando um array vazio. Ao clicar novamente em #start, a animação recomeçará:

<button id="start">start</button>
<button id="stop">stop</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}
div.newcolor {
	background: green;
}

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

Veja também

método animate,
que anima propriedades dos elementos
método clearQueue,
que permite remover todos os itens não executados da fila de funções
método dequeue,
que permite executar a próxima função na fila de funções