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

O método jQuery.animate() dis­po­ni­bi­liza variados tipos de recursos para a criação de efeitos visuais em páginas web, ga­ran­tindo uma exibição com­pa­tí­vel com di­fe­ren­tes na­ve­ga­do­res. Devido ao que é capaz de fazer, ele é muito utilizado por de­sen­vol­ve­do­res para integrar, em sites, todo tipo de animação, de simples a mais complexas.

O que é jQuery.animate()?

jQuery.animate() é uma função da bi­bli­o­teca jQuery que pos­si­bi­lita a criação de animações em sites, já que ela é capaz de modificar pro­pri­e­da­des CSS de um elemento HTML, como posição, tamanho, cor e trans­pa­rên­cia. 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 pro­pri­e­da­des CSS, que tran­si­ci­o­nam para valores-finais es­pe­cí­fi­cos, criando uma animação fluida. Gere, com fa­ci­li­dade, efeitos CSS no sistema de ge­ren­ci­a­mento de conteúdo (CMS) de sua pre­fe­rên­cia, im­ple­men­tando, por exemplo, jQuery no WordPress.

Para aprender mais sobre conceitos básicos de jQuery, acesse o tutorial in­tro­du­tó­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);

• pro­per­ties: Objeto que contém as pro­pri­e­da­des CSS e os valores-finais da animação.
• duration: Indica a duração da animação em mi­lis­se­gun­dos.
• 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 pos­si­bi­li­da­des de controlar animações, que incluem sequên­cias, 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() se­gui­da­mente, como mostra o exemplo abaixo:

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

A con­ca­te­na­çã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 ani­ma­te­Loop() 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 ve­lo­ci­dade da animação. Observe o exemplo:

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

No código acima, a função de easing ea­se­Out­Bounce 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. Pri­mei­ra­mente, $(window).scrollTop() detecta a posição de rolagem atual. Em seguida, a posição do elemento myElement é de­ter­mi­nada 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 mi­lis­se­gun­dos).