destacados

Gabriel Da Silva

Portafolio del ilustrador y director de arte brasileño, aunque afincado en Madrid, Gabriel Da Silva.

B&W Helmut Newton

Selección de fotografías en blanco y negro de uno de los fotógrafos más conocidos de las últimas décadas, Helmut Newton.

Judith Erwes

Fotógrafa afincada en Londres con un estilo que combina la moda, el humor y la estética retro.

Jody Rogac

Nacida en Inglaterra y criada en Canadá, Jody Rogac en la actualidad vive y trabaja en Brooklyn. Sus trabajo ha obtenido diversos galardones.

Publicaciones

jQuery Easing Plugin

, 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.

Páginas: 1
comentarioscomentarios