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.
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?
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);
}
Citarfunction 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.
Y no sería más fácil hacerlo en jquery?, vamos digo yo...
$('#div_id').animate( { height: "500px" }, { queue: false, duration: 5000 })
CitarY 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.