Os efeitos com jQuery, pelo menos muitos deles, podem se realizar sem muitas complicações, já que existem umas funções que simplificam a tarefa dos desenvolvedores (Ver a biblioteca Effects). Em muitos casos conseguir um efeito nos levará a uma linha de código em nosso programa, como esta:
$("#camadaefeitos").hide("slow");
Com isto conseguimos que o elemento com id="camadaefeitos" desapareça da página. Porém ademais, o efeito não é uma simples fusão do elemento na página (tornar-se transparente), e sim, que também vai acompanhado de uma redução de tamanho progressiva até desaparecer.
Combinando os efeitos com a interação de usuário, por meio de eventos, podemos conseguir que os efeitos respondam às ações do visitante, o que multiplica as possibilidades, mantendo a simplicidade, elegância e facilidade de manutenção do código Javascript. Veremos em um exemplo a seguir.
Podemos ver o exemplo em funcionamento em uma página à parte.
Como podemos ver, vamos ter uma camada e um par de links. Com jQuery faremos que ao clicar os links se oculte e se mostre a camada, com as funções da biblioteca Effects.
Para começar, este é o código HTML do exemplo, que compreende tanto a camada como os links.
<div id="camadaefeitos" style="background-color: #cc7700; color:fff; padding:10px;">
<p>
Isto é uma camada que nos servirá para fazer efeitos!
</div>
<a href="#" id="ocultar">Ocultar a camada</a> |
<a href="#" id="mostrar">Mostrar a camada</a>
</p>
Agora vem a parte interessante, que é na que associamos eventos a estes dois links e codificamos as chamadas às funções de Effects, que farão com que se mostre e se oculte a camada.
O código Javascript, que faz uso de jQuery seria o seguinte:
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#camadaefeitos").hide("slow");
});
$("#mostrar").click(function(event){
event.preventDefault();
$("#camadaefeitos").show(3000);
});
});
Como se pode ver, primeiro temos que definir o evento ready do objeto $(document), para fazer coisas quando o documento está preparado para receber ações.
Logo, se define o evento click sobre cada um dos dois links. Para isso, invoco o método click sobre o link, que selecionamos com jQuery através do identificador da etiqueta A.
$("#ocultar").click(function(event){
Com isto estou definindo o evento click sobre o elemento com id="ocultar".
$("#camadaefeitos").hide("slow");
Isto faz com que nossa camada, a que havíamos visto o identificador (atributo id) "camadaefeitos", se oculte. Passamos o parâmetro "slow" porque queremos que o efeito seja lento.
Agora vejamos a função dos efeitos com outra chamada:
$("#camadaefeitos").show(3000);
Isto faz com que se mostre o elemento com id "camadaefeitos", e que o processo de mostrar-se dure 3000 milésimos de segundos.
Não há mais complicações, portanto se tiverem entendido isto, já saberão fazer efeitos simples, porém atrativos com jQuery em sua página web. Agora poderão ver o código completo deste exemplo criado por CriarWeb.com para demonstrar o uso de efeitos.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Efeitos com jQuery</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#camadaefeitos").hide("slow");
});
$("#mostrar").click(function(event){
event.preventDefault();
$("#camadaefeitos").show(3000);
});
});
</script>
</head>
<body>
<div id="camadaefeitos" style="background-color: #cc7700; color:fff; padding:10px;">
Isto é uma camada que nos servirá para fazer efeitos!
<br>
<br>
Coloco este texto simplesmente de prova
</div>
<p>
<a href="#" id="ocultar">Ocultar a camada</a> |
<a href="#" id="mostrar">Mostrar a camada</a>
</p>
</body>
</html>
Por último, coloco o link de novo ao exemplo em funcionamento.
Como se pode comprovar, fazer efeitos com jQuery é bastante simples. Claro que há outros detalhes importantes e outros tipos de efeitos e funcionalidades de personalização dos mesmos, porém isto nos serviu para demonstrar o simples que é trabalhar com este framework Javascript. Nos próximos capítulos continuaremos explorando casos de uso típicos de jQuery.
