Javascript:
Código Javascript:
Ver original
var objeto = document.getElementById("pj"), boton = document.getElementById("boton-dragon"); boton.addEventListener("click", function(){ objeto.style.height = objeto.style.height == "200px" ? "auto" : "200px"; }, false);;
Css:
Código CSS:
Ver original
#pj { background-color:#333; color:#fff; width:400px; height:auto; overflow:auto; border-radius:6px; padding:5px; text-align:center; margin:10px; transition: all 300ms ease ; } #boton-dragon { background-color: RGBA(255, 100, 120, 0.1); color:#fff; width:100px; height:20px; border-radius:6px; padding:5px; text-align:center; margin:10px; } #boton-dragon:hover { background-color:RGBA(255,255,255,1); color:#333; }
HTML:
Código HTML:
Ver original
Cuando le doy click al boton me agranda la ventana "pj" pero no lo hace con una animacion, sino que solo cambia de la nada.
Existe forma de animarla?
http://jsfiddle.net/64b4x/