En el artículo anterior del Manual de jQuery empezamos a hablar sobre las colas de efectos. Vimos que crear una cola de efectos es una tarea muy sencilla, básicamente porque jQuery gestiona de manera automática la cola de efectos predeterminada. Ahora queremos comenzar a mostrar cómo podemos trabajar nosotros mismos con estas colas de efectos y modificar su comportamiento.

Para ello vamos a ver el método más importante que tenemos que conocer para trabajar con las colas de efectos de jQuery: queue(). Como muchos otros métodos de este framework Javascript, queue() permite su invocación con distintos juegos de parámetros, por lo que, dependiendo de los valores que le pasemos a la función hará unas cosas u otras. Comenzaremos con el uso más simple y luego iremos complicando los ejercicios en futuros artículos.

Método queue([nombreCola])

Si llamamos al método queue() sin parámetros o pasándole una cadena con el nombre de una cola, nos devolverá un array con cada una de las funciones que están encoladas en ese momento.

Si no indicamos parámetros a queue() estamos indicando que nos pase la lista de eventos encolados en la cola predeterminada. Si se indica un parámetro de tipo cadena, que sería el nombre de la cola a examinar, lo que nos devuelve es el array de funciones de la cola con nombre indicado en el parámetro.

Veremos un ejemplo sencillo de esta posible invocación del método queue() y además, aparte vamos a ver que se pueden encolar funciones en la cola tantas veces como queramos, aunque la cola esté en marcha.

El efecto es que esas funciones encoladas posteriormente se quedarán al final de la cola y se ejecutarán cuando el resto de la cola se haya ejecutado.

Si lo deseamos, antes de ponernos a comentar este ejemplo, podemos ver el ejercicio en marcha que vamos a construir.

Tenemos el siguiente HTML, que incluye varios elementos:

<button id="botonfade">Muestra y luego oculta con fadeIn y fadeOut</button>
<button id="botonslide">Muestra y luego oculta con slideUp slideDown</button>
<button id="botontamanocola">Muestra el número de funciones en cola ahora mismo</button>
<div id="mensaje">
   En estos momentos no hay funciones de efectos en la cola por defecto.
   <br>
   <span class="notar">Pulsa repetidas veces los botones de arriba para ir metiendo funciones en la cola</span>
</div>
<div id="micapa"></div>

Como se puede ver tenemos tres botones. Uno sirve para agregar funciones en la cola para hacer efectos fadeIn() y fadeOut(), el segundo para agregar a la cola funciones de efectos slideUp() y slideDown() y el tercero para mostrar la longitud de la cola en un momento dado.

Luego tenemos una capa para mostrar mensajes y otra con id="micapa" que será el DIV que vamos a animar con los efectos.

Así podremos definir el evento onclick del primer botón:

$("#botonfade").click(function(){
   capa = $("#micapa");
   capa.fadeOut(500);
   capa.fadeIn(500);
   muestraRestantesCola();
});

Así podemos definir el evento onclick del segundo:

$("#botonslide").click(function(){
   capa = $("#micapa");
   capa.slideUp(500);
   capa.slideDown(500);
   muestraRestantesCola();
});

Estos dos botones, como se puede ver, ejecutan efectos sobre "micapa" y el resultado es que, a medida que pulsamos los botones repetidas veces, los efectos se van encolando. Podemos pulsar tantas veces como queramos y se irán encolando más y más efectos en la cola predeterminada.

Al ejecutar estos eventos click, como última sentencia hay una llamada a la función muestraRestantesCola(), que veremos ahora mismo. Pero antes veamos el tercer botón, que sirve para mostrar el número de elementos de la cola predeterminada.

$("#botontamanocola").click(function(){
   muestraRestantesCola();
});

Como se ve, se llama a la función muestraRestantesCola(), que simplemente accede a la cola para saber el número de funciones de efectos encoladas en un momento dado. Su código es el siguiente:

function muestraRestantesCola(){
   var numFuncionesEnCola = $("#micapa").queue().length;
   $("#mensaje").text("En el momento de hacer el último clic en los botones hay " + numFuncionesEnCola + " funciones de efectos en cola");
}

En la primera sentencia se accede al la cola predeterminada del elemento con id="micapa", lo que nos devuelve un array, al que luego se accede a su propiedad "length" para saber el número de elementos que contiene. Con esto averiguamos el número de funciones encoladas en un momento dado. Luego se muestra ese número en la capa con id="mensaje".

Podemos ver el código completo de este ejercicio.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Cola de efectos por defecto en jQuery</title>
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>   
<style type="text/css">
body{
   font-size: 0.75em;
   font-family: tahoma, verdana, sans-serif;
}
.notar{
   color: #339;
}
#mensaje{
   margin: 20px 5px;
}
#micapa{
   left: 200px;
   top: 150px;
   position: absolute;
   width: 50px;
   height: 50px;
   background-color: #3d3;
}
</style>
<script languague="javascript">
function muestraRestantesCola(){
   var numFuncionesEnCola = $("#micapa").queue().length;
   $("#mensaje").text("En el momento de hacer el último clic en los botones hay " + numFuncionesEnCola + " funciones de efectos en cola");
}
$(document).ready(function(){
   $("#botonfade").click(function(){
      capa = $("#micapa");
      capa.fadeOut(500);
      capa.fadeIn(500);
      muestraRestantesCola();
   });
   $("#botonslide").click(function(){
      capa = $("#micapa");
      capa.slideUp(500);
      capa.slideDown(500);
      muestraRestantesCola();
   });
   $("#botontamanocola").click(function(){
      muestraRestantesCola();
   });
});
</script>

</head>
<body>
   <button id="botonfade">Muestra y luego oculta con fadeIn y fadeOut</button>
   <button id="botonslide">Muestra y luego oculta con slideUp slideDown</button>
   <button id="botontamanocola">Muestra el número de funciones en cola ahora mismo</button>
   <div id="mensaje">
      En estos momentos no hay funciones de efectos en la cola por defecto.
      <br>
      <span class="notar">Pulsa repetidas veces los botones de arriba para ir metiendo funciones en la cola</span>
   </div>
<div id="micapa"></div>
</body>
</html>

Ahora, para acabar, podemos ver el ejercicio en marcha en una página aparte.

En el siguiente artículo continuaremos con el trabajo con colas de efectos y aprenderemos a encolar funciones que no son las de efectos de jQuery, de modo que podramos meter nuestras propias funciones en la cola, con cualquier tipo de instrucción.