jQuery logoUn efecto que me habí­a gustado bastante era el que hací­an algunas listas con ajax que cuando eliminaban un item lo hací­an caer mientras se desvanecí­a en la caí­da, al igual que, al contrario, si cargaban un nuevo item parecí­a caer desde la parte de arriba de la web materializándose en la parte de arriba de una lista. Continuando con la lectura de jQuery que estoy haciendo esta semana he visto que es realmente fácil hacer este efecto ya que solo hay que mezclar un par de efectos de aplicación y fadeOn/fadeOut para hacer que un div o un objeto cualquiera aparezca. Os dejo como siempre el ejemplo diseccionado.

Codigo que carga la librerí­a jQuery y las funciones aparecer() y desaparecer():

PLAIN TEXT
HTML:
  1. <script src="http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3.     function desaparecer(objeto, caida){
  4.         $(objeto).animate({
  5.             opacity: 0.0,
  6.             marginTop: caida,
  7.         }, 500 ).hide("slow");
  8.     }
  9.    
  10.     function aparecer(objeto, caida){
  11.         $(objeto)
  12.             .animate({
  13.                 opacity: '0.0',
  14.                 marginTop: "-"+caida,
  15.             }, 10 ).show()
  16.             .animate({
  17.                 opacity: '1.0',
  18.                 marginTop: "0",
  19.             }, 1000 );
  20.     }
  21. </script>

Un pequeño CSS de ejemplo que da las opciones al div que vamos a hacer aparecer y desaparecer y de paso centra la web entera para que no fallen los porcentajes:

PLAIN TEXT
CSS:
  1. html, body {
  2.         height:100%
  3.         width:100%;
  4.         margin:0px;
  5.         padding:0px;
  6.     }
  7.     #mensaje {
  8.         width:20%;
  9.     }

El codigo continente en el body, ejecutamos las funciones con 2 parametros. El primero es el id del objeto en cuenstion, en nuestro caso #mensaje y el segundo será la distancia a la que caerá o la distancia desde la que caerá. Si introducimos un numero simplemente se tomara como distancia en px, pero se pueden introducir también porcentajes:

PLAIN TEXT
HTML:
  1. <a href="#" onClick="javascript:desaparecer('#mensaje', '10%'); return false;">Desaparecer</a><br>
  2. <a href="#" onClick="javascript:aparecer('#mensaje', '10%'); return false;">Aparecer</a><br>
  4.     <div VALIGN="top" id="mensaje">
  5.         <img src="http://www.tierra0.com/wp-content/themes/satori/images/encabezado.gif" style="width:100px; height:30px;">
  6.     </div>

Ejemplo completo:

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>ejemplo desaparecer/aparecer</title>
  6.     <style type="text/css">
  7.         html, body {
  8.             height:100%
  9.             width:100%;
  10.             margin:0px;
  11.             padding:0px;
  12.         }
  13.         #mensaje {
  14.             width:20%;
  15.         }
  16.     </style>
  17.     <script src="http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script>
  18.     <script type="text/javascript">
  19.         function desaparecer(objeto, caida){
  20.             $(objeto).animate({
  21.                 opacity: 0.0,
  22.                 marginTop: caida,
  23.             }, 500 ).hide("slow");
  24.         }
  25.        
  26.         function aparecer(objeto, caida){
  27.             $(objeto)
  28.                 .animate({
  29.                     opacity: '0.0',
  30.                     marginTop: "-"+caida,
  31.                 }, 10 ).show()
  32.                 .animate({
  33.                     opacity: '1.0',
  34.                     marginTop: "0",
  35.                 }, 1000 );
  36.         }
  37.     </script>
  38. </head>
  40.         <a href="#" onClick="javascript:desaparecer('#mensaje', '10%'); return false;">Desaparecer</a><br>
  41.         <a href="#" onClick="javascript:aparecer('#mensaje', '10%'); return false;">Aparecer</a><br>
  43.     <div VALIGN="top" id="mensaje">
  44.             <img src="http://www.tierra0.com/wp-content/themes/satori/images/encabezado.gif" style="width:100px; height:30px;">
  45.     </div>
  46. </body>
  47. </html>