Tema: Como lograr efecto deslizante en capa
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 13/04/2013, 21:14
isabelramirezmontoya
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 14 años
Puntos: 1
Respuesta: Como lograr efecto deslizante en capa
alexg88, que pena molestarte nuevamente, pero no logro que me funcione, hice los cambios que me sugeriste y baje la libreria jquery, pero no logro que me funcione.

Adjunto el codigo con los cambios. ¿Tengo algo malo en el script?

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.  
  9. $(".contenedor").hover(
  10. function()
  11. {
  12.  $(".contenido2").finish().slideDown();      
  13. },
  14. function()
  15. {
  16.  $(".contenido2").slideUp();   
  17.     
  18. });
  19.     
  20. </script>
  21.  
  22. <style type="text/css"> 
  23.  
  24.  .contenedor
  25.  { 
  26.  margin:0 auto;
  27.  padding: 0;
  28.  width: 300px;
  29.  border: 1px solid black;
  30.  background: white;
  31.  }
  32.  
  33.  .contenido1
  34.  { 
  35.  margin:0 auto;
  36.  text-align:center;
  37.  padding: 0;
  38.  height: auto;
  39.  background: #CCCCCC;
  40.  }
  41.  
  42.  .contenido2
  43.  { 
  44.  margin:0 auto;
  45.  text-align:center;
  46.  padding: 0;
  47.  display:none;
  48.  height: auto;
  49.  } 
  50.  
  51.  p
  52.  {
  53.  text-align:justify; 
  54.  margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px;
  55.  }
  56.  
  57. </style>
  58.  
  59. </head>
  60.  
  61. <body>
  62.  
  63. <div class="contenedor">
  64.  
  65. <div class="contenido1">Importante</div>
  66.  
  67. <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>
  68.  
  69. </div>
  70.  
  71. </body>
  72. </html>

Gracias