Ejemplo jQuery para encolar funciones que no son efectos

Ahora podemos ver un ejemplo completo en el que encolamos varios tipos de funciones. Algunas son funciones de efectos,
que no necesitamos que hacer nada para que se encolen y otras son funciones normales, que tenemos que encolar
explícitamente.
Tenemos este código HTML:
<button id="botoncomenzar">Hacer una cola de ejecución con funciones que no son efectos</button>
<div id="micapa"></div>
Como se puede ver, hay un botón y una capa. La capa nos servirá para animarla y el botón para comenzar la animación en el
momento que lo pulsemos. Veamos entonces el código del evento click que asociaremos a ese botón y que encolará varias
funciones, unas de efectos y otras funciones normales.
$("#botoncomenzar").click(function(){
capa = $("#micapa");
//encolo directamente funciones que son efectos
capa.animate({"width": "80px"}, 1000);
//para encolar otras funciones utilizo queue()
capa.queue(function(){
$(this).css({
"border": "3px solid #339",
});
$("#botoncomenzar").text("Acabo de ponerle el borde... ");
$(this).dequeue();
});
capa.animate({"height": "200px"}, 2000);
capa.queue(function(continua){
$(this).css({
"border": "0px"
});
$("#botoncomenzar").text("Quitado el borde... ");
//el parámetro continua es una función que lleva al siguiente paso de la cola (jpara Query
1.4)
continua();
});
capa.animate({
"height": "50px",
"width": "400px"
}, 1000);
});
El resultado de ejecutar este código Javascript se puede ver en una página aparte.
En el siguiente artículo veremos el último uso que nos queda por explicar del método queue() y de paso, otro método
interesante, stop(), que sirve para detener la ejecución de una cola.