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

Prueba por ti mismo

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

Prueba por ti mismo

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

Prueba por ti mismo