jQuery: avance na biblioteca mais popular do mercado parte 2

Animações com jQuery - Introdução

Seja bem-vindo ao módulo 2 do curso de jQuery. Aqui nós daremos continuidade ao nosso jogo Alura Typer. Nesse módulo focaremos em animações, de fade in, fade out, scroll, slide up e slide down. Vamos aprender a fazer AJAX utilizando as funções do jQuery, então nós iremos fazer requisições GET, POST, buscar e enviar dados para um servidor.

Também iremos ver os problemas mais comuns que os desenvolvedores encontram quando estão trabalhando com AJAX, de onde eles vêm e como nós os resolvemos. Além disso, estudaremos também alguns plug-ins do jQuery para melhorar algumas funcionalidades da nossa aplicação, logo veremos como adicionamos um plug-in no nosso projeto.

Tudo isso será visto ao longo deste módulo 2 do curso de jQuery, então vamos dar continuidade aos nossos estudos e colocar as mãos na massa!

Animações com jQuery - Mostrando o placar

Quando começamos o jogo, no nosso placar não há nenhuma informação relevante para o usuário. O jogo poderia ser iniciado com o placar escondido, e com um botão para mostrá-lo ou escondê-lo. Então vamos dar essa opção ao usuário, ele que escolherá se quer ver o placar ou não.

Vamos começar adicionando um novo botão, do lado do botão de reiniciar. Então, na página principal.html, dentro da div botoes, adicionamos o botão:

<div class="botoes">
    <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
        <i class="material-icons">restore</i>
    </a>
    <!-- NOVO BOTÃO AQUI -->
    <a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
        <i class="material-icons">assignment</i>
    </a>
</div>

Como queremos que o jogo comece com o placar escondido, precisamos alterar o seu CSS, mais precisamente a propriedade display. Então, no estilos.css, adicionamos:

.placar {
    display: none;
}

Agora, quando clicarmos no botão que adicionamos acima, o placar é mostrado. Para fazer isso, precisamos implementar um código JavaScript, e como esse código é referente ao placar, vamos adicioná-lo ao arquivo placar.js. Como o placar será mostrado quando clicarmos no botão, precisamos escutar o seu evento de click:

$("#botao-placar").click(mostraPlacar);

Agora precisamos implementar a função mostraPlacar, que como o nome já diz, será a função responsável por mostrar o placar:

$("#botao-placar").click(mostraPlacar);

function mostraPlacar() {

}

Uma das formas de mostrarmos o placar, é justamente alterar novamente a sua propriedade CSS display de none para block. Já sabemos como alterar uma propriedade CSS com o jQuery:

$("#botao-placar").click(mostraPlacar);

function mostraPlacar() {
    $(".placar").css("display", "block");
}

Agora podemos abrir a página principal.html no navegador, clicar no botão para mostrar o placar e perceber que o placar realmente é mostrado. Mas se clicarmos novamente no botão, o que acontece? Nada! O ideal é que se clicarmos novamente no botão, o placar seja escondido novamente. Logo, ao clicarmos no botão, se o placar estiver escondido, ele será exibido, se não estiver, ele será escondido.

Poderíamos fazer uma condição if para verificar o valor atual do display e invertê-lo. Mas como esse recurso de mostrar e esconder é tão comum, o jQuery já facilitou a nossa vida, criando a função show. Com isso não precisamos mais alterar o CSS no JavaScript:

$("#botao-placar").click(mostraPlacar);

function mostraPlacar() {
    $(".placar").show();
}

E para esconder algo, existe a função oposta, a hide:

$("#botao-placar").click(mostraPlacar);

function mostraPlacar() {
    $(".placar").hide();
}

Só que mais uma vez teríamos que fazer um if para verificar quando chamar a função show e quando chamar a função hide. Só que mais uma vez o jQuery facilita a nossa vida, criando a função toggle. Ela é semelhante à função toggleClass, que vimos no último módulo, que adiciona ou remove uma classe. Só que a toggle adiciona ou esconde um elemento:

$("#botao-placar").click(mostraPlacar);

function mostraPlacar() {
    $(".placar").toggle();
}

Agora nossa funcionalidade está pronta! Mas ela pode ficar ainda melhor. Podemos reparar que quando clicamos no botão para exibir o placar, nosso texto é deslocado levemente para a esquerda. Isso porque quando o placar é adicionado, a barra de rolagem do navegador também aparece, ocupando um espaço e deslocando o texto. Podemos resolver isso mexendo novamente no CSS, para que o espaço da barra de rolagem já venha na página, independente se houver placar ou não. Logo, adicionamos o seguinte código no estilos.css:

body {
    overflow: scroll;
}

Para melhorar mais ainda, podemos melhorar a exibição do placar, porque atualmente ele aparece de maneira abrupta na página. Podemos animar essa transição, deixando-a mais suave. Para isso, podemos ver a função slideDown, que tem a mesma funcionalidade que a função show, mas realiza a transição de uma maneira mais suave:

$("#botao-placar").click(mostraPlacar);

function mostraPlacar() {
    $(".placar").slideDown();
}

Podemos reparar agora que o placar é mostrado aos poucos, de uma maneira mais lenta. Se queremos deixar mais suave ainda, podemos passar um tempo em milissegundos por parâmetro para a função:

$("#botao-placar").click(mostraPlacar);

function mostraPlacar() {
    $(".placar").slideDown(600);
}

Além do slideDown, analogamente temos o slideUp, para mostrar um elemento. No nosso caso queremos alternar entre essas duas funções, para isso existe a função slideToggle:

$("#botao-placar").click(mostraPlacar);

function mostraPlacar() {
    $(".placar").slideToggle(600);
}

Agora conseguimos concluir a nossa nova funcionalidade!

O que aprendemos?

• Como exibir um elemento com a função show e ocultá-lo com a função hide.
• Como alternar entre as funções show e hide com a função toggle.
• Como exibir e ocultar um elemento de uma maneira mais suave, com as funções slideDown e slideUp, respectivamente.
• Como alternar entre as funções slideDown e slideUp com a função slideToggle.

Animações com jQuery - Removendo com fade

Um outra funcionalidade da nossa aplicação que precisa de uma pequena animação é a remoção de linhas do placar. Quando removemos alguma linha do placar, é uma remoção abrupta, a linha desaparece, e não suavemente.

Para melhor experiência do usuário, o ideal seria que a linha fosse esmaecendo aos poucos, até chegar num ponto em que ela desapareça.

A função que é responsável por remover as linhas da tabela é a removeLinha, dentro do placar.js. Logo, é nela que precisamos alterar a nossa funcionalidade.

O jQuery já possui uma função que vai diminuindo a opacidade de um elemento aos poucos, até o seu total desaparecimento, essa função é a fadeOut. Então vamos utilizá-la no lugar a função remove:

function removeLinha() {
    event.preventDefault();
    $(this).parent().parent().fadeOut();
}

Podemos reparar agora que o elemento vai desaparecendo aos poucos, mas será que ele é removido mesmo? Podemos inspecionar o HTML da tabela, e para nossa surpresa a linha continua lá, o que mudou foi que o seu display está com valor none. Ou seja, o fadeOut vai removendo a opacidade do elemento até um ponto e depois modifica a sua propriedade display, fazendo com que o elemento desapareça da tela, mas continue no HTML.

Não é exatamente isso que queremos, queremos que o elemento também seja removido do HTML, então vamos chamar a função remove logo após a função fadeOut. Para melhorar a semântica do nosso código, vamos também exportar a linha a ser removida para uma variável:

function removeLinha() {
    event.preventDefault();
    var linha = $(this).parent().parent();

    linha.fadeOut();
    linha.remove();
}

Podemos testar novamente o nosso código, mas parece que o fadeOut não está funcionando! Na verdade, ele está acontecendo, só que o JavaScript imediatamente chama a função remove, não esperando o término do fadeOut acontecer. O certo é só chamarmos a função remove após a função fadeOut* terminar. E nós conseguimos fazer isso!

Primeiro, passamos um tempo em milissegundos por parâmetro para a função fadeOut, esse será o tempo de execução da função:

function removeLinha() {
    event.preventDefault();
    var linha = $(this).parent().parent();

    linha.fadeOut(1000);
    linha.remove();
}

E aguardamos 1 segundo para executar a função remove. Nós fazemos isso através da função , que recebe dois parâmetros: a função que desejamos executar após determinado tempo, e o próprio tempo que será aguardado para executar a função:

function removeLinha() {
    event.preventDefault();
    var linha = $(this).parent().parent();

    linha.fadeOut(1000);
    setTimeout(function() {
        linha.remove();
    }, 1000);
}

Então temos sempre que ter em mente que devemos remover um elemento após realizar o fadeOut, já que essa função só faz com que o elemento desapareça da tela, mas ainda fique no HTML da página.

Assim como existem o slideUp, slideDown e slideToggle, existem funções semelhantes que executam o fade, o fadeIn, fadeOut e fadeToggle, respectivamente.

O que aprendemos?

• A função fadeOut, que vai esmaecendo o elemento até o ponto dele desaparecer, mas ele continua no HTML.

Sobre o curso jQuery: avance na biblioteca mais popular do mercado parte 2

O curso jQuery: avance na biblioteca mais popular do mercado parte 2 possui 160 minutos de vídeos, em um total de 62 atividades. Gostou? Conheça nossos outros cursos de jQuery em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• As funções de animaçao do Jquery
• Buscando frases com jQuery: AJAX do modo fácil
• Melhorando a experiência do usuário
• Enviando dados com AJAX
• Salvando dados no servidor: AJAX com POST
• Same Origin Policy e CORS
• Plugins externos do jQuery