Método queue

El método queue nos permite trabajar con la cola de funciones vinculadas a un elemento. Consulte también el método clearQueue, que nos permite eliminar de la cola todas las funciones que no se han ejecutado.

Sintaxis

Así mostramos la cola de funciones en ejecución, vinculadas al elemento. Se puede pasar un parámetro opcional con el nombre de la cola en forma de cadena (por defecto fx - cola estándar de efectos):

.queue([nombre de cola]);

Podemos manipular la cola. Se ejecuta una vez para cada elemento. Para ello, se puede pasar como segundo parámetro un array de funciones, que reemplazará el contenido de la cola actual:

.queue([nombre de cola], nueva cola );

O se puede pasar como segundo parámetro una nueva función callback para agregar a la cola. Esta función a su vez recibe otra función como parámetro. Esto permite eliminar automáticamente el siguiente elemento de la cola y avanzar la cola:

.queue([nombre de cola], función callback(next) {
	next();
});

Cada elemento puede tener una o varias colas. En muchas aplicaciones se utiliza solo una (fx). Las colas permiten realizar secuencias de acciones con el elemento de forma asíncrona, sin interrumpir la ejecución del programa. La llamada queue con una función callback nos permite colocar una nueva función al final de la cola. La función callback se ejecuta una vez para cada elemento en el conjunto. Al agregar una función con queue, debemos asegurarnos de que luego se llamará al método dequeue, para que la siguiente función en la cadena funcione.

Ejemplo

Agreguemos una función personalizada. Primero, después de hacer clic en #animate, mostraremos un cuadrado rojo, que se moverá a la derecha durante 2s, luego mediante queue agregaremos una función personalizada que cambiará el color del cuadrado a verde, agregando la clase newcolor. Como puede ver, luego aquí se llama a dequeue, para quitar la función de la cola. Luego nuestro cuadrado se moverá a la izquierda medio segundo y volverá a ponerse rojo - mediante una segunda función personalizada quitamos la clase newcolor. Al finalizar la animación plegamos nuestro cuadrado:

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

Ejemplo

Agreguemos una cola en forma de array para eliminar la anterior. Al hacer clic en el botón #start veremos la animación del ejemplo anterior. Al hacer clic en el botón #stop detendremos la animación agregando un array vacío. Al hacer clic nuevamente en #start la animación comenzará de nuevo:

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

Véase también

método animate,
que anima las propiedades de los elementos
método clearQueue,
que permite eliminar todos los elementos no ejecutados de la cola de funciones
método dequeue,
que permite ejecutar la siguiente función en la cola de funciones