Desplegar un div lentamente hacia abajo

r4mos · #1 (**permalink**) 03/12/2009, 05:25

Estoy construyendo un javascript que me permita mostrar lentamente un div. Desde altura=0 hasta la altura del div.

Quiero algo parecido a esto (lawebdelprogramador.com/codigo/codigo.php?idp=1803&id=45&texto=JavaScript) pero sólamente expandiendo.

Mi código es este:

Código:

<html>
<head>
<style>
#id{
	display:none;
}
#img{
	height:70px;
	width:70px;
	background:url(img.gif);
}
</style>
<script type="text/javascript">
function mostrarDiv(idDiv, heightDiv){
	heightVar=0;
	
	document.getElementById(idDiv).style.height=heightVar+"px";
	document.getElementById(idDiv).style.display='block';
	expandir(idDiv,heightDiv,heightVar);
}
function expandir(idDiv,heightDiv,heightVar){
	if(heightVar<heightDiv){
		heightVar++;
		document.getElementById(idDiv).style.height=heightVar+"px";
		window.setTimeout("expandir(idDiv,heightDiv,heightVar);", 5);
	}
}
</script>
</head>

<body>

<a href="javascript:mostrarDiv('id','70');">Abrir</a>
<div id="id">
	<div id="img"></div>
</div>

</body>
</html>

No se por qué no funciona

Muchas gracias

masterojitos · #2 (**permalink**) 03/12/2009, 05:41

lo harias mas sencillo con slideToggle de jQuery.

suerte.

r4mos · #3 (**permalink**) 03/12/2009, 11:44

Si a alguien le interesa, lo logré asi:

Código:

<html>
<head>
<style>
#img{
	height:70px;
	width:70px;
	background:url(img.gif);
}
</style>
<script type="text/javascript">
var heightDiv;
var id;
var heightVar=0;
function mostrarDiv(cual,altura){
	id=cual;
	heightDiv=altura;
	if(document.getElementById(id).style.display=='none'){
		document.getElementById(id).style.height=heightVar+"px";
		document.getElementById(id).style.display='block';
		expandir();
	}
}
function expandir(){
	if(heightVar++<heightDiv){
		document.getElementById(id).style.height=heightVar+"px";
		if((heightVar*100/heightDiv)>75){
			window.setTimeout ("expandir();", 20);
		}else{
			window.setTimeout ("expandir();", 5);
		}
	}
}
</script>

</head>

<body>
		<a href="javascript:mostrarDiv('iddiv',70);">Mostrar Div</a>
		<div id="iddiv" style="overflow:hidden; display:none">
			<div id="img"></div>
		</div>
</body>

</html>

Vun · #4 (**permalink**) 03/12/2009, 11:52

A mi me puede venir bien r4mos, gracias por compartirlo +