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