jQuery logoLa curiosidad me ha dejado hoy en tierras de jQuery viendo como podí­a hacer un efecto parecido al de los iconos de mi Dock cuando se enciende un programa.
Para los que nunca habí­an visto un Mac el efecto que hace es un efecto "bote" como si el icono saltara sobre la repisa.

Para esto he usado el plugin de easing con un efecto "Bounce". ¿Que no os ha quedado claro? vaale, va lo explico por pasos.
Para hacerlo introducimos un pedazo de código CSS que ajusta nuestro icono abajo a la derecha, dentro de la pagina entera:

PLAIN TEXT
CSS:
  1. #saltos {
  2.     position: absolute;
  3.     bottom:0px;
  4.     right:0px;
  5. }

Luego insertamos jQuery y la función con la que vamos a hacer saltar nuestra imagen en el header

PLAIN TEXT
HTML:
  1. <script src="http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script>
  2. <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.2.js" type="text/javascript"></script>
  3.  
  4. <script type="text/javascript">
  5. function salta(objeto){
  6.     var method = 'Bounce';
  7.    
  8.     var method1 = 'easeIn'+method;
  9.     var method2 = 'easeOut'+method;
  10.     var hInicial = 100;
  11.     var hFinal = 30;
  12.     $(objeto).animate(
  13.         {height:hInicial},
  14.         {duration: 1000, easing: method1}
  15.     ).animate(
  16.         {height:hFinal},
  17.         {duration: 1000, easing: method2}
  18.     );
  19. }
  20. </script>

Por ultimo ponemos la imagen que va a botar dentro del div con su correspondiente link para que active el salto al pulsarla:

PLAIN TEXT
HTML:
  1. <div VALIGN="top" id="saltos">
  2.     <a href="#" onClick="javascript:salta('#saltos'); return false;">
  3.         <img src="http://www.tierra0.com/wp-content/themes/satori/images/encabezado.gif" style="width:100px; height:30px;">
  4.     </a>
  5. </div>

Eso es todo. Si queremos hacer botar la imagen solo tenemos que llamar a la función desde un script, ajax o lo que queramos…

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 saltos</title>
  6.     <style type="text/css">
  7.         #saltos {
  8.             position: absolute;
  9.             bottom:80%;
  10.             left:2%;
  11.         }
  12.     </style>
  13.     <script src="http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script>
  14.     <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.2.js" type="text/javascript"></script>
  15.    
  16.     <script type="text/javascript">
  17.         function salta(objeto){
  18.             var hInicial    = 100;
  19.             var hFinal    = 30;
  20.            
  21.             var method    = 'Bounce';
  22.             var method1  = 'easeIn'+method;
  23.             var method2  = 'easeOut'+method;
  24.            
  25.             $(objeto).animate(
  26.                 {height:hInicial},
  27.                 {duration: 1000, easing: method1}
  28.             ).animate(
  29.                 {height:hFinal},
  30.                 {duration: 1000, easing: method2}
  31.             );
  32.         }
  33.     </script>
  34. </head>
  36.  
  37.     <div VALIGN="top" id="saltos">
  38.         <a href="#" onClick="javascript:salta('#saltos'); return false;">
  39.             <img src="http://www.tierra0.com/wp-content/themes/satori/images/encabezado.gif" style="width:100px; height:30px;">
  40.         </a>
  41.     </div>
  42.  
  43. </body>
  44. </html>