jQuery Easing Plugin: 30 diferentes efectos con jQuery

Stay hungry, stay foolish

Steve Jobs

Este plugin nos da la posibilidad de trabajar con efectos mas complejos en jQuery, en total son 30 efectos diferentes y utilizarlos es muy sencillo, solamente tenemos que descargar el plugin y elegir el tipo de efecto easing que queremos utilizar. La lista completa de efectos se encuentra en la pagina del plugin.

Descargar: jQuery Easing Plugin

Veamos un ejemplo para ver como funciona. A partir de la versión 1.4.3 los diferentes efectos de jQuery pueden recibir 3 parametros: duracion, easing y callback. duracion se refiere al tiempo en milisengundos que durara el efecto, easing es el nombre del metodo easing que se va a ejecutar, es aquí donde vamos a utilizar el plugin y callback que se refiere a una función que se ejecutara al finalizar la animacion.

En el siguiente ejemplo el efecto slideUp durara 5 segundos, la funcion easing que se va a ejecutar es “easeOutBounce” y al terminar se ejecutara un alert con el mensaje efecto completo. Aunque si queremos podemos omitir la función callback como en el efecto 2.

$('#efecto1').slideToggle(5000,'easeOutBounce',function(){
        alert("efecto completo");
    });

Efecto 2: Duración 2 segundos y se ejecuta el método easeInOutExpo.

$('#efecto2').slideToggle(2000,'easeInOutExpo');});

Con .animate() podemos especificar el método easing como un elemento del arreglo que recibe la propiedad CSS que vamos a animar, en la cual el primer elemento es el valor de la propiedad CSS y el segundo es el metodo easing. Veamos el ejemplo. la propiedad width esta animada con el método easeInOutExpo y la propiedad height esta animada con el método easeOutBounce. El efecto animate durara 3 segundos.

$('#efecto3').animate({
    width: ['toggle', 'easeInOutExpo'],
    height: ['toggle', 'easeOutBounce']
},3000);

Espero que les sirva, aquí les dejo el archivo con la demostración.