Mostrar/ocultar capa con efecto transición

tempsmort · #1 (**permalink**) 28/08/2006, 09:57

Hola a todos,

me gustaría encontrar algún código para hacer el efecto que utiliza Apple aquí al apretar sobre "más información". He encontrado códigos en el foro para mostrar pero que al clicar otra vez no me ocultan la capa, y además, me gustaría saber cómo hacer ese efecto de transición.

Supongo que esto lo hacen mediante javascript, verdad?

Muchas gracias por vuestro tiempo!!!

KarlanKas · #2 (**permalink**) 28/08/2006, 10:29

Así estaría bien?

Código:

<html>
<head>
	<title>Untitled</title>
	<style>
	#masinfo{
	border:solid 1px silver;
	width:200px;
	height:1px;
	padding:5px;
	overflow:hidden;
	}
	</style>
	<script>
//Script de KarlanKas para forosdelweb.com

	alturaMaxima=201;
	velocidad=10 //pixels por vez. alturaMaxima-cantidad tiene que ser múltiplo de velocidad.
	espera=100 //Tiempo de espera entre cada movimiento
	
	
	cantidad=1;
	
	function mostrar(esto){
	if(cantidad==1 || cantidad==alturaMaxima){
	incremento=(cantidad==1)?velocidad:-velocidad;
	tope=(cantidad==1)?alturaMaxima:1;
	}	
	es=document.getElementById(esto);
	pe=esto;
	
	cantidad+=incremento;

	es.style.height=cantidad+"px";
	if(cantidad!=tope){
	setTimeout("mostrar('"+pe+"')",espera);
	}
	}
	</script>
</head>

<body><a href="#" onclick="mostrar('masInfo');return false">Más Info</a>
<div id="masInfo">Estaba el señor Don Gato<br/>
sentadito en su tejado<br/>
marramiau, miau, miau,<br/>
sentadito en su tejado.<br/>
<br/>
Ha recibido una carta<br/>
por si quiere ser casado,<br/>
marramiau, miau, miau, miau,<br/>
por si quiere ser casado.<br/>
<br/>
Con una gatita blanca<br/>
sobrina de un gato pardo,<br/>
marramiau, miau, miau, miau,<br/>
sobrina de un gato pardo.<br/>
<br/>
</div>

</body>
</html>

tempsmort · #3 (**permalink**) 28/08/2006, 10:42

Ups! KarlanKas no me funciona con Firefox. Pero gracias por la velocidad.

KarlanKas · #4 (**permalink**) 28/08/2006, 10:43

Qué raro... lo he probado con firefox y aparte del tema del padding (es mejor ponerlo a cero) funciona perfectamente.

Qué fallo te da?

tempsmort · #5 (**permalink**) 28/08/2006, 10:47

Veo una página con un enlace + el texto. Y si clickeo el enlace no pasa nada.
Yo uso Firefox con Mac.

tempsmort · #6 (**permalink**) 28/08/2006, 10:51

Ahora tengo este ejemplo sacado del foro:

Código:

<html>
<head>
<style type="text/css">
.micapa {visibility:hidden}
</style>
<script type="text/javascript">
var capa=null;
function mostrar(c) {
  obj=document.getElementById(c);
  if(capa!=null)
    capa.style.visibility='hidden';
  obj.style.visibility='visible';
  capa=obj;
}
</script>
</head>
<body>
<a href="#" onclick="mostrar('capa1');return false">Capa 1</a>
<a href="#" onclick="mostrar('capa2');return false">Capa 2</a>
<div id="capa1" class="micapa">C1</div>
<div id="capa2" class="micapa">C2</div>
</body>
</html>

Pero no hace transición y no cierra/abre con el mismo enlace.

KarlanKas · #7 (**permalink**) 28/08/2006, 10:57

Luego lo pruebo en casa con el firefox de linux que debe ser primo hermano del de Mac y a ver que pasa...

Por cierto, muy chulo el iMac que te vas a comprar!

KarlanKas · #8 (**permalink**) 28/08/2006, 11:02

Código:

<html>
<head>
	<title>Untitled</title>
	<style>
	#masinfo{
	border:solid 1px silver;
	width:0px;
	height:1px;
	padding:0px;
	overflow:hidden;
	}
	</style>
	<script>
	alturaMaxima=301;
	velocidad=10 //pixels por vez. alturaMaxima-cantidad tiene que ser múltiplo de velocidad.
	espera=100 //Tiempo de espera entre cada movimiento
	anchura=200;
	
	
	prorrata=anchura/alturaMaxima
	cantidad=1;
	
	function mostrar(esto){
	if(cantidad==1 || cantidad==alturaMaxima){
	incremento=(cantidad==1)?velocidad:-velocidad;
	tope=(cantidad==1)?alturaMaxima:1;
	}	
	es=document.getElementById(esto);
	pe=esto;
	
	cantidad+=incremento;

	es.style.height=cantidad+"px";
	es.style.width=parseInt(prorrata*cantidad)+"px";
	
	if(cantidad!=tope){
	setTimeout("mostrar('"+pe+"')",espera);
	}
	}
	</script>
</head>

<body><a href="#" onclick="mostrar('masInfo');return false">Más Info</a>
<div id="masInfo">Estaba el señor Don Gato<br/>
sentadito en su tejado<br/>
marramiau, miau, miau,<br/>
sentadito en su tejado.<br/>
<br/>
Ha recibido una carta<br/>
por si quiere ser casado,<br/>
marramiau, miau, miau, miau,<br/>
por si quiere ser casado.<br/>
<br/>
Con una gatita blanca<br/>
sobrina de un gato pardo,<br/>
marramiau, miau, miau, miau,<br/>
sobrina de un gato pardo.<br/>
<br/>
</div>

</body>
</html>

tempsmort · #9 (**permalink**) 28/08/2006, 11:02

jeje, muy chulo, de verdad

Y gracias por tu tiempo

tempsmort · #10 (**permalink**) 28/08/2006, 11:22

El segundo ejemplo se me pasó y no lo probé.

Este si que "se mueve", literalmente. No se muestra/oculta, sinó que se muestra desde un principio, pero al apretar MÁS INFORMACIÓN, se estira, como si el div se encogiera. Un efecto curioso, pero raro.

Ahora tengo un código que me funciona y hace lo que quiro pero sin transición lenta (aparece de golpe), no crece hacia abajo lentamente.

Código PHP:

<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <a href="javascript:hideshow(document.getElementById('adiv'))">Click here</a> <script type="text/javascript"> function hideshow(which){ if (!document.getElementById) return if (which.style.display=="block") which.style.display="none" else which.style.display="block" } </script> <div id="adiv" style="font:24px bold; display: none">Now you see me<br />blah blah blah<br />blah blah blah<br />blah blah blah<br />blah blah blah<br /></div> </body> </html>

KarlanKas · #11 (**permalink**) 01/09/2006, 04:39

Con esto lo arreglas:

Código:

<html>
<head>
	<title>Untitled</title>
	<style>
	#masinfo{
	border:solid 1px silver;
	width:0px;
	height:1px;
	padding:0px;
	overflow:hidden;
	}
	#contenido{
	display:block;
	width:200px;
	padding:10px;
	font:normal 10px/15px verdana;
	text-align:justify;
	
	}
	</style>
	<script>
	alturaMaxima=401;
	velocidad=20 //pixels por vez. alturaMaxima-cantidad tiene que ser múltiplo de velocidad.
	espera=100 //Tiempo de espera entre cada movimiento
	anchura=200;
	
	
	prorrata=anchura/alturaMaxima
	cantidad=1;
	
	function mostrar(esto){
	if(cantidad==1 || cantidad==alturaMaxima){
	incremento=(cantidad==1)?velocidad:-velocidad;
	tope=(cantidad==1)?alturaMaxima:1;
	}	
	es=document.getElementById(esto);
	pe=esto;
	
	cantidad+=incremento;

	es.style.height=cantidad+"px";
	es.style.width=parseInt(prorrata*cantidad)+"px";
	
	if(cantidad!=tope){
	setTimeout("mostrar('"+pe+"')",espera);
	}
	}
	</script>
</head>

<body><a href="#" onclick="mostrar('masInfo');return false">Más Info</a>
<div id="masInfo"><div id="contenido">Estaba el señor Don Gato<br/>
sentadito en su tejado<br/>
marramiau, miau, miau,<br/>
sentadito en su tejado.<br/>
<br/>
Ha recibido una carta<br/>
por si quiere ser casado,<br/>
marramiau, miau, miau, miau,<br/>
por si quiere ser casado.<br/>
<br/>
Con una gatita blanca<br/>
sobrina de un gato pardo,<br/>
marramiau, miau, miau, miau,<br/>
sobrina de un gato pardo.<br/><br>
<img src="http://www.karlankas.net/chufa2.jpg" alt="Foto de Chufa" width="180" border="0">
</div>
</div>
</body>
</html>

Un saludo!

tempsmort · #12 (**permalink**) 04/09/2006, 02:01

Ya hacía días que no me pasaba por aquí, muchas gracias. Voy a probarlo.

mejork1capuleto · #13 (**permalink**) 19/07/2011, 09:30

Hola compañeros, querria saber como utilizar este script pero a la inversa, vaya que cuando le clicke, la capa se me oculte, y al volver a clickar que se muestre.

Un saludo!!