Tema: Como lograr efecto deslizante en capa
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 14/04/2013, 07:54
alexg88
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años
Puntos: 344
Respuesta: Como lograr efecto deslizante en capa
Buenas,

Para que funcione correctamente, hay que ejecutar el script cuando se haya cargado el DOM y para eso se usa el método ready al que se la pasa la función que se ejecuta al cargarse el DOM.


Código HTML: 
Ver original
  1. <html>
  2.  
  3. <head>
  4.  
  5. <script src="jquery-1.9.1.min.js"></script>
  6.  
  7. <script type="text/javascript">
  8.  $(document).ready(function(){
  9. $(".contenedor").hover(
  10. function()
  11. {
  12.  $(".contenido2").finish().slideDown();      
  13. },
  14. function()
  15. {
  16.  $(".contenido2").slideUp();   
  17.     
  18. });
  19. });
  20.     
  21. </script>
  22.  
  23. <style type="text/css"> 
  24.  
  25.  .contenedor
  26.  { 
  27.  margin:0 auto;
  28.  padding: 0;
  29.  width: 300px;
  30.  border: 1px solid black;
  31.  background: white;
  32.  }
  33.  
  34.  .contenido1
  35.  { 
  36.  margin:0 auto;
  37.  text-align:center;
  38.  padding: 0;
  39.  height: auto;
  40.  background: #CCCCCC;
  41.  }
  42.  
  43.  .contenido2
  44.  { 
  45.  margin:0 auto;
  46.  text-align:center;
  47.  padding: 0;
  48.  display:none;
  49.  height: auto;
  50.  } 
  51.  
  52.  p
  53.  {
  54.  text-align:justify; 
  55.  margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px;
  56.  }
  57.  
  58. </style>
  59.  
  60. </head>
  61.  
  62. <body>
  63.  
  64. <div class="contenedor">
  65.  
  66. <div class="contenido1">Importante</div>
  67.  
  68. <div class="contenido2"><p>La idea es que este mensaje (capa) permancezca oculto, que solo sea visible la franja que dice importante, que solo cuando el usuario pase el raton sobre esta franja que dice Importante, la capa que contiene el mensaje, se delice hacia abajo y se visualice</p></div>
  69.  
  70. </div>
  71.  
  72. </body>
  73. </html>