Categorias

Crie efeitos para aparecer e ocultar elementos com jQuery

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.

Veja este código em funcionamento





	Efeitos com jQuery
	





Camada de Efeitos

 

Aqui você pode colocar o qualquer coisa!

Ocultar a camada | Mostrar a camada

Arquivos para Download:

effect.rar