[Fuente: http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/]
Aqui hay una demo de lo que queremos montar
Introducción – Una explicación de easing
Lo que hace que el menu que vamos a montar tenga una smooth animation es un cosa llamada “easing“. Según la definición del Adobe Flash developer center:
“El término easing se refiere a aceleración/deceleración gradual durante una animación, lo cual ayuda a que tus animaciones parezcan más realistas. Easgin crea una apariencia más natural de aceleración o deceleración ajustando gradualmente el rate de cambio”
Gracias al plugin jQuery Easing , podemos utilizar Easing fuera de entornos de Flash y de ActionScript.Descargalo desde la web oficial.
Paso 1 – Configurar la estructura
Antes de empezar a tirar jQuery , tenemos que montar una estructura de menu rápida con XHTML y grabarla en los ficheros de proyecto requeridos. Creamos nuevos documentos para XHTML , CSS y javascript con la siguiente estructura:
Empezamos poniendo en la header las librerias necesarias y ficheros externos. Hemos elegido cargar jQuery desde el Google CDN hosted, mientras que el plugin de easing lo colocamos en la carpeta “js”. El orden de carga es importante!
[codebox 1]
- Copiamos la estructura de menu en el body:
- Los elementos del menu tienen un class asignado que designará el color del bloque. Dentro de cda bloque de menu hay un título y un subtitulo que son escondidos por defecto.
Paso 2 – Estilo con CSS
Ahora que tenemos la estructura de menu vamos a darle un poco de estilo y para que se organize horizontalmente. El overflow debe ser hidden para todos los elementos de la lista. Esto asegurará que el subtitulo para cada campo no se mostrará hasta que el height se expanda para que se ajuste a él.
[codebox 3]
Paso 4 – Animación con jQuery
Veamos ahora el código de “animated-menu.js”:
[codebox 4]
Hay dos acciones en este código. Cuando el ratón se mueve sobre un elemento del menu , entonces empieza una animación que hace expandir a 150px durante 0.6 segundos. El easing aplicado es ‘easeOutBounce’ que hace que la caja rebote un poco cuando llega al final de la animación. Cuando el ratón es movido fuera se lanza la animación que restaura el height original.
El método stop() se ha encadenado antes de la animación par prevenir al buffer de memoria si la animación entra en un bucle repetido cuando el ratón se mueve alrededor muy rápido.