Foro de elhacker.net

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.


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?

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

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

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.

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

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

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