jQuery - método de cola de datos

Manual de referencia de datos jQuery

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 la cola de funciones que se ejecutan en los elementos coincidentes.

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 de cola

El método queue() opera 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.

Descripció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 una secuencia de acciones de manera asíncrona en el elemento sin detener 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á cuando se complete la transición de deslizamiento.

El método .queue() nos permite operar directamente en esta cola de funciones. Llamar a un .queue() con callback es especialmente útil; permite放置 una nueva función en el extremo final de la cola.

Esta característica es similar a la función de callback proporcionada por métodos de animación, pero no es necesario configurar un callback al ejecutarse 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 llama a .dequeue() ultimate, para que el siguiente función en cola pueda ejecutarse.

Ejemplo 1

Realizar operaciones de cola para 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

Manual de referencia de datos jQuery