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;}
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.