A animação dá vida a qualquer página web e uma das características mais marcantes do jQuery é a capacidade de criar animações personalizadas. Nesse artigo, veremos como dar vida às nossas páginas web usando o jQuery. Este permite que se criem efeitos simples, como esconder e mostrar qualquer div ou um processo mais complexo, como mover um div de um local para outro.
Para começar tem que baixar o jQuery source file (você pode fazer o download deste arquivo do site do jQuery: http://www.jquery.com), e a seguir, será preciso criar um arquivo html e outro css. A estrutura irá se parecer com isto:
- index.html
- css/style.css
- js/jquery-1.9.0.js
Primeiro veremos como esconder e mostrar qualquer componente:
hide(), show() e toggle(): Estas funções são usadas para mostrar, esconder ou alternar qualquer componente html e, para fazer isto, deve-se criar alguns divs no código da página index.html, como é mostrado abaixo:
Listagem 1: index.html
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<link type="text/css" href="css/style.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Jquery Test File</title>
</head>
<body>
<div id="display">
This Div will Show and Hide
</div>
<input type="button" name="btnHide" id="btnHide" value="Hide" />
<input type="button" name="btnShow" id="btnShow" value="Show" />
</body>
</html>
E o código para o arquivo css é dado abaixo:
Listagem 2: style.css
@CHARSET "ISO-8859-1";
{
margin: 0px;
padding: 0px;
}
body{
background-color: lightblue;
}
#display{
width:400px;
height:400px;
background-color:blue;
border:thin solid black
}
Continuando, para começar a animação, adicionaremos o seguinte código ao head da página index.html:
Listagem 3: Animando index.html
<script language="javascript">
$(document).ready(function(){
$("#btnShow").click(function(){
$("#display").show();
});
$("#btnHide").click(function(){
$("#display").hide();
});
});
</script>
O que foi feito aqui é que foi criado um event handler para toda vez que o usuário clicar em qualquer um desses botões. Quando os cliques no botão usarem o id btnHide, chamaremos a função show() da classe do jQuery que esconde o componente com o id display. Similarmente, quando o usuário clica no botão de mostrar o div se torna visível novamente. Há dois problemas com essa abordagem, primeiro não há efeito no componente se clicarmos no btnShow e este já estará visível e vice-versa e segundo que precisamos criar dois diferentes componentes e para um div ora visível ora invisível em um sistema como um toggle menu, precisaremos fazer isso usando um único div ou botão. E é aí onde entra o toggle. Então, aqui está o código para se fazer o mesmo efeito usando um único botão e uma única função.
Listagem 4: Function toggle
<script language="javascript">
$(document).ready(function(){
$("#btnHide").click(function(){
$("#display").toggle();
});
});
</script>
Controlando a velocidade: Apesar do sistema estar rodando bem, este não está dando os resultados esperados de uma animação em JQuery. Isto é devido ao não controle da velocidade da animação. Para fazer isso, pode-se passar um número inteiro como parâmetro da função. Este valor é a duração da animação em milissegundos. Por exemplo $("#display").toggle(800); agora a animação irá terminar em 0,8 segundo. Também dá um efeito de suavidade à animação. Alternativamente, podem-se passar três nomes ao parâmetro: fast (aproximadamente 200 milissegundos), medium (400 milissegundos), e slow (600 milissegundos).
Aqui está um exemplo de código.
Listagem 5: Function toggle com parâmetro
<script language="javascript">
$(document).ready(function(){
$("#btnHide").click(function(){
$("#display").toggle("slow");
});
});
</script>
fadeIn(), fadeOut e fadeTo(): A função de esconder remove os componentes para o layout controlando sua largura e sua altura para 0 e sua propriedade de display para nenhuma (none). Em contraste, a função fadeOut torna os elementos transparentes controlando seu valor de opacidade para 0. Aqui está o código para mostrar ou esconder um elemento usando as funções fadeIn e fadeOut.
Listagem 6: fadeIn e fadeOut
<script language="javascript">
$(document).ready(function(){
$("#btnHide").click(function(){
$("#display").fadeOut();
});
$("#btnShow").click(function(){
$("#display").fadeIn();
});
});
</script>
Também se pode controlar a velocidade do fadeIn e do fadeOut através da passagem de parâmetro assim como nas funções show, hide e toggle. Mas, se não se quiser fazer o elemento desaparecer completamente do div, pode-se usar a função fadeTo. Esta função assimila três parâmetros, que são a duração, a opacidade pretendida e a função de retorno. Aqui está um exemplo da função fadeTo que reduz a opacidade para 50%.
Listagem 7: fadeTo
<script language="javascript">
$(document).ready(function(){
$("#btnHide").click(function(){
$("#display").fadeTo(1000, 0.5);
});
$("#btnShow").click(function(){
$("#display").fadeTo(1000, 1.0);
});
});
</script>
slideUp(), slideDown e slideToggle: A função slideDown permite que o div aumente a altura de um elemento até uma altura desejada, ao passo que slide reduz sua altura para 0 e faz este desaparecer da página. Aqui está um exemplo.
Listagem 8: slideUp() e slideDown
<script language="javascript">
$(document).ready(function(){
$("#btnHide").click(function(){
$("#display").slideUp();
});
$("#btnShow").click(function(){
$("#display").slideDown();
});
});
</script>
No entanto, podemos notar que está acontecendo tudo um pouco rápido demais, então, pode-se controlar a velocidade através da passagem de um parâmetro inteiro para a chamada o qual é a duração em milissegundos. Segue abaixo um exemplo:
Listagem 9: Controle de velocidade com slideUp()
<script language="javascript">
$(document).ready(function(){
$("#btnHide").click(function(){
$("#display").slideUp(800);
});
$("#btnShow").click(function(){
$("#display").slideDown(800);
});
});
</script>
Aqui novamente, para controlar a visibilidade de um elemento estamos usando dois botões de controle, o que não é desejável para se trabalhar se a aplicação principal for do tipo de "drop down". Então, para controlar o uso de um único controlador pode-se usar a função slideToggle(). Aqui está o código:
Listagem 10: slideToggle
<script language="javascript">
$(document).ready(function(){
$("#btnHide").click(function(){
$("#display").slideToggle(800);
});
});
</script>
Isto é tudo por hoje, vejo-os na próxima!
