Artigos HTML e CSS 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" style="width:100px; height:30px;"/>
<input type="button" name="btnShow" id="btnShow" value="Show" style="width:100px; height:30px;"/>
</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!