Vamos a aprender cómo darle un efecto JQuery UI particular de “Rebote” a ciertos elementos de nuestra página utilizando algunas funcionalidades de esta librería. No es necesario instalar jQuery UI pues vamos a utilizar una versión en línea del mismo. Lo primero que debemos realizar es ir a la página de jQuery UI a la sección de “Demos” en particular. Luego seleccionaremos la opción “Effect” del menú “Effects”. En dicha opción, encontraremos diversos efectos que le podemos dar a nuestros elementos de página:
El efecto que nosotros buscamos es el de rebote o “Bounce”. Por lo que iremos al menú de opciones del efecto y seleccionaremos dicho efecto (es la segunda opción). Una vez seleccionada la opción, podemos probarlo haciendo click en el botón “Run effect”.
Ahora que ya sabemos cómo será el efecto, debemos hacer click en el vínculo con la imagen de un ojo llamado “view source”:
Se nos mostrará cómo fue creado dicho efecto utilizando jQuery UI. Debemos copiar el código que se encuentra dentro de la cabecera <head</head> para obtener las vinculaciones a jQuery UI en línea. Luego debemos borrar ciertas líneas para dejarlo de la siguiente manera:
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = "bounce";
// most effect types need no options passed by default
var options = {};
// run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
Para darle efecto a alguna sección de nuestra página (por ejemplo un <div>) simplemente debemos agregar el siguiente código:
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Effect</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</body>
Y tendremos la animación realizada haciendo uso de jQuery UI en línea.
