# 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()](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-find/) e [jQuery.on()](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-on/). Ainda, com a ajuda do [jQuery.css()](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/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](https://www.ionos.com/pt-br/digitalguide/hospedagem/blogs/wordpress-jquery/ "WordPress e jQuery").

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

Dica À procura de um [*webspace*](https://www.ionos.com/hosting/webspace "Webspace: Coloque seu projeto online — IONOS") para o seu projeto? Na IONOS, seu espaço web terá pelo menos 10 GB de espaço de armazenamento e uma vasta gama de funções, ideias para as suas necessidades. Escolha o melhor plano para você e coloque o seu site no ar hoje mesmo.

## Sintaxe de jQuery.animate()

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

```jQuery
$(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.

Dica Faça uso da [API da IONOS](https://developer.hosting.ionos.com "Developer API — IONOS") para aproveitar ao máximo todo potencial que a IONOS oferece em seus serviços: escalabilidade, integração de sistemas e automação. Por meio da API, você terá a flexibilidade e o controle necessários para otimizar os produtos de hospedagem da IONOS que contratar.

## 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:

```jQuery
$("#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:

```jQuery
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:

```jQuery
$("#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:

```jQuery
$(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).

Dica O [Deploy Now](https://www.ionos.com/hosting/deploy-now "Deploy Now — IONOS") da IONOS acelera o processo de implementação do seu site ou aplicação web. Com ele, todos os recursos que você precisa, como instâncias de servidor, bancos de dados e domínios, serão configurados automaticamente. Assim, você não precisará perder tempo com configurações técnicas, podendo se concentrar integralmente no trabalho de desenvolvimento.


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-animate/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-animate/) for AI/LLM consumption.