jQuery.animate(): Crie animações para o seu site

O método jQuery.animate() disponibiliza variados tipos de recursos para a criação de efeitos visuais em páginas web, garantindo uma exibição compatível com diferentes navegadores. Devido ao que é capaz de fazer, ele é muito utilizado por desenvolvedores para integrar, em sites, todo tipo de animação, de simples a mais complexas.

O que é jQuery.animate()?

jQuery.animate() é uma função da biblioteca jQuery que possibilita a criação de animações em sites, já que ela é capaz de modificar propriedades CSS de um elemento HTML, como posição, tamanho, cor e transparência. A função pode, inclusive, ser combinada com outros métodos jQuery de forma eficaz, como com jQuery.find() e jQuery.on(). Ainda, com a ajuda do jQuery.css(), ela também consegue definir estados iniciais de propriedades CSS, que transicionam para valores-finais específicos, criando uma animação fluida. Gere, com facilidade, efeitos CSS no sistema de gerenciamento de conteúdo (CMS) de sua preferência, implementando, por exemplo, jQuery no WordPress.

Para aprender mais sobre conceitos básicos de jQuery, acesse o tutorial introdutório de jQuery do nosso Digital Guide.

Sintaxe de jQuery.animate()

O método jQuery.animate() tem a seguinte estrutura básica:

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

• properties: Objeto que contém as propriedades CSS e os valores-finais da animação.
• duration: Indica a duração da animação em milissegundos.
• easing: Define a função de transição que regulará o andamento da animação.
• complete: Função* callback* opcional, que é executada após a conclusão da animação.

Tipos de animações possíveis com jQuery.animate()

O método jQuery.animate() oferece diversas possibilidades de controlar animações, que incluem sequências, loops e funções de easing (transição suave).

Animações em sequência

Você pode executar várias animações em sequência acionando o método jQuery.animate() seguidamente, como mostra o exemplo abaixo:

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

A concatenação faz com que o elemento seja movido 250 pixels para a esquerda e, em seguida, 100 pixels para baixo.

Loops de animação

Você também pode executar efeitos em loop fazendo uso da função callback para acionar novamente a animação:

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

Como a função animateLoop() foi definida no código acima, o elemento se deslocou 250 pixels para a direita e, em seguida, voltou à posição inicial.

Funções de easing

Se você quer criar uma animação com transição suave, aposte em uma das funções jQuery.animate() easing. Elas permitem que você ajuste a velocidade da animação. Observe o exemplo:

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

No código acima, a função de easing easeOutBounce cria um efeito de quicar (bounce), enquanto desloca o elemento para a direita.

Animações de rolagem

Para acionar uma animação quando o usuário rola a tela de uma página web, você pode fazer uso do evento jQuery.animate() scroll. Este código ilustra a situação:

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

Nele, o evento de rolagem (scroll) é vinculado ao movimento da janela, ativando-o assim que o usuário executa uma rolagem. Primeiramente, $(window).scrollTop() detecta a posição de rolagem atual. Em seguida, a posição do elemento myElement é determinada por $("#myElement").offset().top. Se a posição de rolagem for 300 pixels mais alta do que a posição do elemento, a função jQuery.animate scroll é chamada. Nesse caso, ela definiu a cor de fundo como #ff0000 (vermelho) e a posição à esquerda como 0. A animação deve durar 1 segundo (1.000 milissegundos).