[javascript] Redimensionar con un for un div (solucionado con JQuery)

[moikano→@]

Hola.

Estoy intentando redimensionar  una etiqueta "div" al cargar la página, el div debería ir de 0px a 500px en 5 segundos mas o menos.
Lo he intentado con la función "setTimeout" junto con un for y con las propiedades del div. El código es este.

Código [Seleccionar] Expandir


function redim(){
for (i=0; i<=500; i++){
setTimeout("document.getElementById('cont').style.height=i+'px'",1000);
}
}

Es una prueba, si funcionara sería de 0px a 500px en 500 segundos. Pero me carga el div enseguida, no en 500 segundos, pasa de 0px a 500px en menos de un segundo.
Lo he probado en múltiples combinaciones anidando funciones con otras pero no he conseguido que lo haga.

Que hago mal?

[Anvil]

Me imagino que en pseudocódigo podría quedar algo asi.

Código (javascript) [Seleccionar] Expandir


function redim(i)
{
// sacamos el tamaño actual
var pixels = document.getElementById('div_id').style.height;
// vemos si ya estamos en el tamaño que queremos
if(pixels < 500)
{
// si no esta hacemos la redimensión
document.getElementById('div_id').style.height = i + "px";
// y volvemos a llamar la función
setTimeout("redim("+i*10+")",1000);
}
}

// función que se ejecuta en onload
function onLoad()
{
redim(1);
}


[moikano→@]

function redim(i)
{
   // sacamos el tamaño actual
   var pixels = document.getElementById('div_id').style.height;
   // vemos si ya estamos en el tamaño que queremos
   if(pixels < 500)
   {
      // si no esta hacemos la redimensión
      document.getElementById('div_id').style.height = i + "px";
      // y volvemos a llamar la función
      setTimeout("redim("+i*10+")",1000);
   }
}

Probado, y no funciona, se queda con 1px de tamaño sin cambiar. No se si es un error de sintaxis o de planteamiento. Solo he cambiado cosas en la sintaxis para ver si funcionaba.

[Spider-Net]

Y no sería más fácil hacerlo en jquery?, vamos digo yo...

Código (javascript) [Seleccionar] Expandir

$('#div_id').animate( { height: "500px" }, { queue: false, duration: 5000 })

[moikano→@]

Y no sería más fácil hacerlo en jquery?, vamos digo yo...

Código

$('#div_id').animate( { height: "500px" }, { queue: false, duration: 5000 })

Si, mucho mas fácil y totalmente valido.
Muchas gracias, lo marco como solucionado.