Con jQuery podemos realizar animaciones mediante la función animate, que permite modificar propiedades CSS.
Siguiendo un poco una antigua entrada sobre cómo hacer una pequeña sencilla animación con jQuery, vamos a poner otra forma de animar nuestra web haciendo uso, esta vez, de componentes de estilo o CSS.
Según vemos en la documentación oficial de animate nos permite realizar animaciones basada en ciertas propiedades CSS que sean de carácter numérico. Por ejemplo, supongamos que queremos animar un texto cambiándole las propiedades CSS de tamaño (size) y posición (left).
Hagamos que una capa con id=»textosample» y con un texto «ANIMACIÓN» cambie su posición relativa left entre 0px y 400px, mientras también cambiamos su tamaño de fuente (font-size) de 0px a 24px:
var font = 24;
var pos = 0;
function animacion() {
if (pos == 0) pos = 400;
else pos = 0;
if (font == 8) font = 24;
else font = 8;
jQuery(«#textosample»).animate({
fontSize: font+’px’,
left: pos+’px’,
}, 1000 );
setTimeout(‘animacion()’,2000);
}
jQuery(document).ready( function() {
animacion();
});
Analizando el código vemos que hacemos una llamada cada 2 segundos (2000) a la función «animacion()», que a su vez llama a jQuery.animate y realiza el cambio de fontSize y left position de la capa div con id=#textosample en una animación que durará 1 segundo (1000). Hay que tener cuidado en no hacer que la animación tarde más que el propio tiempo de llamada de la función «animacion()» para evitar problemas sobrecargando tareas al navegador, con resultados aleatorios.
Y a partir de aquí lo que tu imaginación y necesidades marquen.
