No exemplo vamos mostrar o uso simples das funções de efeitos de jQuery.
Vamos implementar um simples efeito de ocultar e mostrar um elemento da página web.
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.
Isto é uma camada que nos servirá para fazer efeitos!
Ocultar a camada | Mostrar a camada
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”.
Dentro da função a executar quando se clica, se coloca a chamada à função dos efeitos.
$(“#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.
Segue o código do exemplo completo.
Efeitos com jQuery Camada de Efeitos
Aqui você pode colocar o qualquer coisa!
