logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

jQuery - Animate

Não última aula falamos sobre alguns métodos jQuery que servem para fazer efeitos e animações. Além deles, temos também a opção de usar o método animate. Em relação aos efeitos mostrados na última aula, este método precisa de um pouco mais de código, mas oferece mais versatilidade, já que nos possibilita alterar outras propriedades CSS.

                    

    $("elemento").animate({propriedade: valor}, velocidade, callback);

                    
                

O primeiro argumento passado neste método é um objeto composto de propriedades CSS e valores, portanto podemos mudar várias propriedades ao mesmo tempo. Note também que podemos usar o operador incremental nos valores das propriedades.

                        
    
        $("#animar").click(function(){
            $("#quadrado").animate({
                width: '+=20px',
                height: '+=20px'
            });
        }); 
    
                        
                    

No exemplo dado acima, as duas propriedades (height e width) são alteradas ao mesmo tempo. Para fazer uma de cada vez com velocidades específicas, não precisamos necessariamente usar a função callback, isto porque métodos animate usados em sequência, esperam automaticamente o anterior terminar para serem executados. Cuidado pois apenas o método animate possui esta funcionalidade de "fila".

                    

    $("#animar").click(function(){

        $("#quadrado").animate({
            width: '+=20px'
        },500);

        $("#quadrado").animate({
            height: '+=20px'
        }),500;

    });

                    
                
Importante:
  • Quase todas as propriedades CSS podem ser animadas, com exceção das cores.
  • As propriedades CSS que possuem traço no nome devem ser escritas no formato camel case. Por exemplo, padding-left deve ser escrita como paddingLeft.
  • Índice de Aulas