Tema: mostrar capa oculta con efecto cortina vertical
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/02/2014, 19:11
pithon
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años, 7 meses
Puntos: 10
mostrar capa oculta con efecto cortina vertical
Intento crear un efecto cortina para mostrar una capa oculta pero apesar de buscar en internet no encontre nada que este echo solo con javascript, muestro lo que tengo echo por si alguien me quiere dar una ayudita con javascript.

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Documento sin título</title>
  6. <style type="text/css">
  7. #panel{
  8.     background:red;
  9.     cursor:pointer;
  10.     height:200px;
  11.     text-align:center;
  12. }
  13. #contenido{
  14.     width:100px;
  15.     height:0;
  16.     background:yellow;
  17.     overflow:hidden;
  18.     
  19. }
  20. </style>
  21. <script type="text/javascript">
  22.  
  23.  
  24. function mostrarCapa(){
  25.     var div=document.getElementById("contenido");
  26.     for(i=0;i<100;i++){
  27.     div.style.height="+"+i+"%";
  28.     }
  29. }
  30. </script>
  31. </head>
  32.  
  33. <body>
  34. <div id="panel" onClick="aparecer()">
  35.   <div id="contenido">contenido capa</div>
  36. </div>
  37.  
  38. </body>
  39. </html>

igual esto no me sirve ya que seria lo mismo que mostrar un display:none, si alguien me dice los pasos para conseguir ese efecto cortina.
saludos.