Método queue([nombreCola]) - II

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".