jQuery.animate(): diseñar ani­ma­cio­nes para tu página web

El método jQuery.animate() ofrece múltiples formas de crear efectos visuales en tu página web y garantiza una vi­sua­li­za­ción uniforme en los di­fe­re­n­tes na­ve­ga­do­res. Estas ventajas la co­n­vie­r­ten en una he­rra­mie­n­ta muy popular entre los de­sa­rro­lla­do­res que quieren in­co­r­po­rar ani­ma­cio­nes sencillas o complejas en sus páginas web.

¿Qué es el método jQuery.animate()?

JQuery.animate() es una función de la librería jQuery que te permite crear ani­ma­cio­nes en páginas web. Influye en las pro­pie­da­des CSS de un elemento HTML, como su posición, tamaño, color o tra­n­s­pa­re­n­cia. También se puede combinar con otros métodos de jQuery, como jQuery.find() o jQuery.on(). Asimismo, es posible definir los estados iniciales de las pro­pie­da­des CSS uti­li­za­n­do jQuery.css(), lo que facilita una tra­n­si­ción suave hacia valores es­pe­cí­fi­cos. Fi­na­l­me­n­te, jQuery.animate() crea efectos CSS en sistemas de gestión de contenido sin problema. De hecho, jQuery se integra en WordPress de forma rápida y sencilla.

Si quieres hacer un repaso a tus co­no­ci­mie­n­tos básicos de jQuery, te re­co­me­n­da­mos consultar el tutorial de jQuery que tenemos en nuestra guía.

Sintaxis del método jQuery.animate()

La es­tru­c­tu­ra de jQuery.animate() es la siguiente:

$(selector).animate({properties}, duration, easing, complete);

• pro­pe­r­ties: es un objeto que contiene las pro­pie­da­des CSS y los valores objetivos para la animación
• duration: es­pe­ci­fi­ca la duración de la animación en mi­li­se­gu­n­dos
• easing: define una función de tra­n­si­ción para ajustar el de­sa­rro­llo de la animación
• complete: es una función callback opcional que se ejecuta una vez fi­na­li­za­da la animación

¿Qué tipos de ani­ma­cio­nes existen?

El método jQuery.animate() tiene varias formas de controlar las ani­ma­cio­nes, in­clu­ye­n­do se­cue­n­cias, bucles y funciones de tra­n­si­ción.

Ani­ma­cio­nes se­cue­n­cia­les

Puedes ejecutar varias ani­ma­cio­nes de forma sucesiva llamando al método .animate() varias veces seguidas. Por ejemplo:

$("#myElement").animate({left: '250px'}).animate({top: '100px'});

Al encadenar dos funciones seguidas, el elemento se desplaza primero 250 píxeles a la izquierda y luego 100 píxeles hacia abajo.

Bucles de animación

También puedes crear efectos de bucle uti­li­za­n­do una función callback para reiniciar la animación. Aquí tienes un ejemplo:

function animateLoop() {
    $("#myElement").animate({left: '250px'}, 1000, function() {
        $("#myElement").animate({left: '0px'}, 1000, animateLoop);
    });
}
animateLoop();

En este caso, la función pe­r­so­na­li­za­da ani­ma­te­Loop() mueve el elemento primero 250 píxeles hacia la derecha y luego lo devuelve a su posición original.

Funciones de tra­n­si­ción

Las funciones de tra­n­si­ción de jQuery.animate() te permiten ajustar la velocidad de la animación. Por ejemplo:

$("#myElement").animate({left: '250px'}, 1000, 'easeOutBounce');

En este caso, la función de tra­n­si­ción “ea­seOu­t­Bou­n­ce” crea un efecto de rebote al animar el elemento hacia la derecha.

Ani­ma­cio­nes al de­s­pla­zar­se

Para activar una animación al de­s­pla­zar­te por la página web, puedes utilizar la función .animate() de jQuery para un evento de scroll del ratón o de la barra lateral:

$(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    var elementPos = $("#myElement").offset().top;
    if (scrollPos > elementPos - 300) {
        $("#myElement").animate({
            backgroundColor: "#ff0000"
            left: "0"
        }, 1000);
    }
});

Este código vincula el evento de de­s­pla­za­mie­n­to o scroll a la ventana. Cada vez que te desplazas, la función se activa. Ana­li­za­n­do este ejemplo, vemos que primero determina la posición actual del de­s­pla­za­mie­n­to con la función $(window).scrollTop(), y luego determina la posición de myElement con $("#myElement").offset().top. Cuando la posición de de­s­pla­za­mie­n­to es 300 píxeles superior a la del elemento, se ejecuta la función jQuery.animate(), la cual cambia el valor del color de fondo a #ff0000 (rojo) y el valor de la posición izquierda a 0. La animación dura 1 segundo (1000 mi­li­se­gu­n­dos).