Mostrar capa progresivamente

AlexWeb · #1 (**permalink**) 04/12/2008, 04:11

Saludos a todos!!

Estoy desarrollando un script para mostrar una capa poco a poco, el código es éste:

function muestraCapa(nombreCapa) {
var capa = document.getElementById(nombreCapa);
capa.style.visibility = "visible";
aumentaAlturaCapa(capa,0);
}

function aumentaAlturaCapa(objCapa,alturaActual) {
var capa = objCapa;
var altura = alturaActual;
if (altura !=309) {
altura++;
capa.style.height = altura.toString()+"px";
setTimeout("aumentaAlturaCapa(capa,altura)",2000);
}
}

Y no consigo que me funcione. Llego hasta la primera llamada de aumentaAlturaCapa, pero luego el setTimeout no me lo hace correctamente...alguien sabría decirme en qué fallo??

ALEX

Panino5001 · #2 (**permalink**) 04/12/2008, 05:13

El problema es la llamada a la función dentro del setTimeout:
Probá así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Documento sin t&iacute;tulo</title> 
<script> 
function muestraCapa(nombreCapa) { 
var capa = document.getElementById(nombreCapa); 
capa.style.visibility = "visible"; 
aumentaAlturaCapa(capa,0); 
} 
 
function aumentaAlturaCapa(objCapa,alturaActual) { 
var capa = objCapa; 
var altura = alturaActual; 
if (altura !=309) { 
altura++; 
capa.style.height = altura.toString()+"px"; 
setTimeout(function(){aumentaAlturaCapa(capa,altura);},50); 
} 
} 
onload=function(){muestraCapa('pp')} 
</script> 
</head> 
 
<body> 
<div id="pp" style="background-color:red; visibility:hidden"></div> 
</body> 
</html>

AlexWeb · #3 (**permalink**) 04/12/2008, 08:07

Funciona a la perfección, mil gracias! Pero me extraña mucho, pq la primera llamada la hago así:

setTimeout("muestraCapa('contenedor')",3000);

Y funciona perfectamente, es raro no??

ALEX

Panino5001 · #4 (**permalink**) 04/12/2008, 08:19

No, no es raro. Pasa que en esa llamada no estás usando argumentos variables, estás usando un único argumento de tipo string, y como lo entrecomillás, la sintaxis es correcta. En el otro caso, el problema es el uso de comillas, ya que cuando el primer argumento de setTimeout es una cadena, setTimeout la evalúa como si estuviera dentro de la función eval.
Para que te funcionara, en lugar de esto:

Código PHP:

  setTimeout("aumentaAlturaCapa(capa,altura)",2000);

Tendrías que usar esto otro:

Código PHP:

  setTimeout("aumentaAlturaCapa(document.getElementById('"+capa.id+"'),"+altura+")",2000);

Pero es un poco más eficiente usar una función anónima.

AlexWeb · #5 (**permalink**) 04/12/2008, 08:42

Ok, entendido! Te agradezco mucho tu ayuda!

ALEX