Efeitos jQuery - Animação

O método jQuery animate() permite que você crie animações personalizadas.

Demonstração de efeitos



jQuery

jQuery Animação - método animate()

O método jQuery animate() é usado para criar animações personalizadas.

Sintaxe:

$(selector).animate({params},speed,callback);

Obrigatório params O parâmetro define as propriedades CSS que formam a animação.

Opcional speed O parâmetro especifica o tempo de duração do efeito. Pode ser um dos seguintes valores: "slow", "fast" ou milissegundos.

Opcional callback Os parâmetros são o nome da função executada após a conclusão da animação.

O exemplo a seguir demonstra a aplicação simples do método animate(); ele move o elemento <div> para a esquerda até que a propriedade left seja igual a 250 pixels:

Exemplo

$("button").click(function(){
  $("div").animate({left:'250px'});
);

Experimente pessoalmente

Dica:Por padrão, todos os elementos HTML têm uma posição estática e não podem ser movidos.

Para operar a posição, lembre-se de definir primeiro a propriedade CSS position do elemento como relative, fixed ou absolute!

jQuery animate() - operar várias propriedades

Atenção, durante a geração da animação, pode-se usar várias propriedades ao mesmo tempo:

Exemplo

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

Experimente pessoalmente

Dica:Pode-se usar o método animate() para operar todas as propriedades CSS?

Sim, quase! No entanto, é importante lembrar de uma coisa: ao usar animate(), deve-se usar a notação CamelCase para todos os nomes dos atributos, por exemplo, deve-se usar paddingLeft em vez de padding-left, marginRight em vez de margin-right, e assim por diante.

Além disso, as animações de cor não estão incluídas na biblioteca jQuery core.

Se precisar gerar animações de cor, você precisa baixar o plug-in Color Animations do jQuery.com.

jQuery animate() - Usando valores relativos

Você também pode definir valores relativos (esses valores são relativos ao valor atual do elemento). É necessário adicionar += ou -= ao valor.:

Exemplo

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

Experimente pessoalmente

jQuery animate() - Usando valores pré-definidos

Você pode até definir os valores de animação dos atributos como "show", "hide" ou "toggle":

Exemplo

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

Experimente pessoalmente

jQuery animate() - Usando a função de fila

Por padrão, o jQuery oferece suporte à função de fila para animações.

Isso significa que se você escrever várias chamadas animate() um após o outro, o jQuery criará uma "fila interna" contendo essas chamadas de métodos. Então, ele executará essas chamadas animate uma após a outra.

Exemplo 1

Esconder, se você deseja executar diferentes animações um após o outro, precisamos usar a função de fila:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
);

Experimente pessoalmente

Exemplo 2

O exemplo a seguir move o elemento <div> para a direita e aumenta o tamanho do texto:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

Experimente pessoalmente