Método jQuery.data - jQuery.queue()
Ejemplo
Mostrar la longitud de la cola:
function showIt() { var n = div.queue("fx"); $("span").text( n.length ); setTimeout(showIt, 100); }
Definición y uso
El método queue() muestra o opera sobre la cola de funciones que se ejecutan en los elementos coincidentes.
Notas:Este es un método de nivel inferior; se utiliza .queue() Muy conveniente.
Sintaxis
.queue(queueName)
Parámetros | Descripción |
---|---|
queueName | Opcional. Valor de cadena que contiene el nombre de la secuencia. El valor predeterminado es fx, la secuencia de efectos estándar. |
Operaciones en cola
El método queue() opera sobre la cola de funciones que se ejecutan en los elementos coincidentes.
Sintaxis
.queue(queueName,newQueue)
Parámetros | Descripción |
---|---|
queueName | Opcional. Valor de cadena que contiene el nombre de la secuencia. El valor predeterminado es fx, la secuencia de efectos estándar. |
Explicación detallada
Cada elemento puede tener una o más colas de funciones adicionadas por jQuery. En la mayoría de las aplicaciones, se utiliza solo una cola (llamada fx). La cola ejecuta secuencia de acciones de manera asíncrona en el elemento sin interrumpir la ejecución del programa. Un ejemplo típico es llamar a varios métodos de animación en el elemento. Por ejemplo:
$('#foo').slideUp().fadeIn();
Cuando se ejecuta esta declaración, el elemento comenzará inmediatamente su animación de deslizamiento, pero la transición de desvanecimiento se colocará en la cola fx, y solo se llamará después de que se complete la transición de deslizamiento.
El método .queue() nos permite operar directamente en esta cola de funciones. Llamar a .queue() con una función de retroalimentación es especialmente útil; permite colocar una nueva función al final de la cola.
Esta característica es similar a la función de retroalimentación proporcionada por métodos de animación, pero no es necesario configurar una función de retroalimentación durante la ejecución de la animación.
$('#foo').slideUp(); $('#foo').queue(function() { alert('Animación completa.'); $(this).dequeue(); });;
Es equivalente a:
$('#foo').slideUp(function() { alert('Animación completa.'); );
Ten en cuenta que cuando se añaden funciones a través de .queue(), debemos asegurarnos de que se llame a .dequeue() al final, para que la siguiente función en cola pueda ejecutarse.
Ejemplo 1
Realiza operaciones de cola en funciones 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(); );
Ejemplo 2
Establece el array de cola para eliminar la cola:
$("#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(); );