Cola de efectos en jQuery

[RabidFish]

Hola gente, ¿qué tal?

Les cuento que estoy avanzando de a poco con mis conocimientos de JavaScript y jQuery y me ha surgido un problema. Supongamos que quiero que un elemento <div> cuadrado (en este caso de color azul) se alargue al hacerle clic, y, recién cuando haya terminado, otro <div> (de color rojo en mi ejemplo) también se alargue automáticamente hasta determinado tamaño. A continuación dejo los códigos:

HTML:

Código HTML:

<div id="azul"></div>
<div id="rojo"></div> 

CSS:

Código:

#azul, #rojo {height:50px; width:50px;}
#azul {background-color:blue;}
#rojo {background-color:red;}

JavaScript:

Código:

<script type="text/javascript">	
	$(document).ready(function() {
		$('#azul').click(function() {
			$(this).stop().animate({width:'100px'}, {duration:1000});
			$('#rojo').stop().animate({width:'300px'}, {duration:1000});
		});
	});
</script>

El inconveniente es que al hacer clic en el cuadrado azul, ambos (azul y rojo) se alargan simultáneamente, y es lo que no quiero. He estado leyendo sobre las colas de efectos y probé especificando un queue, pero no cambia nada (no sé si las colas sólo aplican al mismo elemento o puede ser con varios).

Un saludo y desde ya, gracias.

[maycolalvarez]

Cada función de animación de jQuery tiene un callback al que llama cuando finaliza la animación, sólo debes agregar la siguiente animación dentro de la función anónima que crees para dicho callback

[ryugen]

En tu caso sería así

Código Javascript:

$(document).ready(function() {
        $('#azul').click(function() {
            $(this).stop().animate({width:'100px'}, {duration:1000}, function(){
                        //Función que se ejecuta al finalizar la animación de Azul
                        $('#rojo').stop().animate({width:'300px'}, {duration:1000});
 
                   });
            
        });
    });
 

[RabidFish]

¡Gracias por sus respuestas! Pero acabo de probar el código de ryugen y no pasa nada, sólo se alarga el <div> azul. Si coloco $('#rojo').stop().animate({width:'300px'}, {duration:1000}); fuera del callback de #azul, sí se anima (pero al mismo tiempo que #azul, como en el ejemplo que di primero).

EDITADO: Parece que ahora sí funciona como esperaba, sólo tenía que agregar la palabra "complete:" antes de la función. ¡Muchas gracias a ambos!