jQuery Easing Plugin

0 - , - 10/02/2009 16:10:00

Aquellos que venimos de Flash nos son bastante familiares las ecuaciones de easing de Robert Penner. Este tipo de efectos han sido utilizados desde hace bastante tiempo en Flash y ahora las podemos utilizar con jQuery. El concepto es sencillo en vez de utilizar una animación lineal utilizamos un método de easing, todo ello gracias al plugin jQuery Easing Plugin.
Para utilizarlo, incluimos el plugin

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

para después invocar una ecuación de easing. Existen dos formas de especificar un método:

$(element).slideUp(1000, method, callback});
$(element).slideUp({ duration: 1000, easing: method, complete: callback});

donde 'method' será el método de easing. En la página oficial del plugin puedes ver el listado completo de métodos y verlos en acción.

Para mostrar un poco las posibilidades del plugin he montado dos ejemplos sencillos. El primero muestra y oculta un div con el método easeOutBounce.

$(document).ready(function() {
  $("#mostrar").click(function(event) {
  $("#caja").slideToggle(2000,"easeOutBounce");
});

El segundo, utilizado sobre un menú, realiza un efecto "hover" con el método easeOutBounce también.

$(document).ready(function() {
$('.easing').hover( 
        //over
	function () {
	$(this)
            .animate(
                { width: 250 }, {
                    duration: 600,
                    easing: 'easeOutBounce'
                })
	},
	//out
	function () {
	$(this)
            .animate(
                { width: 200 }, {
                    duration: 300,
                    easing: 'easeOutBounce'
                })
	}
);
});

Lo mejor es Ver el ejemplo en funcionamiento donde también podéis echar un vistazo al HTML y el CSS.

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha