10811 Suscriptores al Feed del Blog
85 Suscriptores al Feed de Anotaciones Breves
38 usuarios online
diseño web valencia en 500 iconos gratuitos para tus aplicaciones web
jQuery Easing Plugin
1 COMENTARIO - Publicado hace 13 meses - Clasificado en: JQUERY, TUTORIALESAquellos 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.
Algunas entradas relacionadas:
- Style Switcher con jQuery
- Efecto "Nudging" con JQuery
- Utilizar jQuery para proteger las direcciones de correo
- Rollover sobre imágenes con jQuery
- Columnas de igual tamaño con jQuery
- Tablesorter: Ordenar tablas de una forma sencilla
- Exportar tablas HTML a Excel con PHP y JQuery
También te puede interesar:
|
|
|
|
|
COMENTARIOS
 |
Publicado hace 13 meses Quizzpot - http://www.quizzpot.com Gracias por el tip, cuando programa con AS utilizaba mucho estos efectos (que tiempos aquellos jejejeje), gracias, voy a utilizarlos ahora con jQuery :D saludos |
