Criando anima��es com jQuery

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!

Criando anima��es com jQuery

Veja neste artigo como criar animações em páginas web utilizando HTML, CSS e jQuery.

Artigos relacionados