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:
1
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”:
ojo_general
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:
Para darle efecto a alguna sección de nuestra página (por ejemplo un <div>) simplemente debemos agregar el siguiente código:
Y tendremos la animación realizada haciendo uso de jQuery UI en línea.