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 divbotoes, adicionamos o botão:
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 toggleadiciona 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
