logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

jQuery - Efeitos

Na aula sobre a sintaxe do jQuery, vimos que podemos obter os efeitos desejados com menos linhas de código em relação ao Vanilla Javascript. Como exemplo, vimos o método .hide(), que pode substituir a ação .css("display", "none").

Esta é mais uma vantagem de se usar a biblioteca jQuery. Além deste exemplo, há diversos outros efeitos que facilitam muito a vida dos desenvolvedores, conforme veremos a seguir. Antes vamos entender algo fundamental sobre efeitos: os seus parâmetros.

Parâmetros de efeitos: tempo e função callback
                    

    $( "#esconder" ).click(function() {
        $(".exemplo").hide();
    });

                    
                

Se usarmos o método hide sem nenhum argumento, como no exemplo mostrado acima, o efeito funcionará sem problemas. Mas podemos adicionalmente, definir o tempo e uma ação que será executada quando o efeito terminar. O sintaxe é:

                    

        $("elemento").hide(velocidade, callback);

                    
                

Portanto, como argumento do método hide(), podemos passar a velocidade em milisegundos que o efeito demorará para acontecer e uma função callback.

Ainda vamos abordar com mais detalhes as funções callback na próxima seção do curso, mas basicamente elas são funções que são executadas depois que função principal terminar.

Para entender o funcionamento da função callback como parâmetro, no exemplo abaixo vamos usar o método hide() para esconder o botão de id "botao-esconder" quando ele for clicado, em um tempo total de 2 segundos. Depois vamos mostrar o elemento de id "texto-escondido" usando o método show().


                    

    $( "#botao-esconder" ).click(function() {
        $(this).hide(2000, function(){
            $("#texto-escondido").show();
        });
        
    });
                    
                

Note que o texto só aparece depois que o efeito hide termina. Caso tivéssemos usado a função em seguida da anterior, sem o recurso do callback, o texto apareceria antes do efeito terminar. Faça o teste abaixo:

                    

    $( "#botao-esconder" ).click(function() {
        $(this).hide(2000);
        $("#texto-escondido").show();
        
    });
    
                    
                

Isto acontece porque Javascript é uma linguagem assíncrona, o que significa que vários comandos podem ser executados ao mesmo tempo, fazendo que o comando show() seja executado antes que o comando hide() termine. Vamos falar sobre isso com mais detalhes na aula sobre funções callback.

hide(), show() e toggle()

Adicionalmente aos métodos hide e show, podemos usar o toggle para alternar entre os dois, o que pode ser extremamente útil em determinadas situações.

Título da aba
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue metus mi, a sodales elit blandit in. Pellentesque mattis sem vitae diam aliquet gravida. Nulla eu elit non lorem faucibus egestas vitae ac tortor.
                    

    $("#toggle-tab").click(function() {

        $("#tab-content").toggle();
        $("#toggle-tab").toggleClass("flip");
        
    });

                    
                

No exemplo acima, usamos o método toggle para esconder e mostrar a caixa de texto. Para melhorar a usabilidade, foi criada uma classe chamada "flip" que gira a seta em 180 graus, para demonstrar as ações de abrir e fechar. Com o método toggleClass() conseguimos adicionar e remover esta classe. Note que obtivemos o efeito desejado sem nunca precisar testar se a caixa está ou não aberta, algo que teria que ser feito em Vanilla Javascript.

slideUp(), slideDown() e slideToggle()

Um efeito também interessante é o de deslizar para cima e para baixo, que pode ser feito com o método slideToggle(). Este método alterna entre os métodos slideUp() e slideDown().

                        
    
    $("#toggle-tab").click(function() {

        $("#tab-content").slideToggle(500);
        $("#toggle-tab").toggleClass("flip");
        
    });
    
                        
                    

fadeIn(), fadeOut(), fadeToggle() e fadeTo()

Outra opção é usar efeitos de fade, que mexem primeiro com a opacidade do elemento e depois com o display.

                            
        
    $("#toggle-tab").click(function() {

        $("#tab-content").fadeToggle();
        $("#toggle-tab").toggleClass("flip");

    });
        
                            
                        

Note que neste exemplo, primeiro ocorre o fadeOut, que é a opacidade indo de 1 até 0, depois ocorre o display: none, no caso de desaparecer. No caso de aparecer, primeiro ocorre o display: initial, depois a opacidade vai de 0 a 1;

O método fadeTo() serve apenas mover a opacidade para algum valor específico entre 0 e 1, não ocorrendo mudanças no estado da propriedade display, o que não serve para o nosso exemplo mas poderia ser usado em outros casos. Este método precisa de dois argumentos, o tempo e o valor da opacidade.

                        
    
    $("#exemplo").fadeTo(200, 0.15); 
    
                        
                    

Perceba que os resultados que tivemos com os métodos show/hide, slide e fade foram parecidos, mas com algumas diferenças sutis. Portanto faça testes antes de decidir qual o melhor para o seu projeto.


** A velocidade de um efeito jQuery também pode ser definida com as keywords "slow" e "fast", que representam 600ms e 200ms respectivamente. Quando a velocidade não é informada, utiliza-se o valor padrão de 400ms.

Índice de Aulas