0 Compartilhamentos 904 Views 8 Comments

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

Arquivos para Download:

effect.rar

Carregando...

Você pode se interessar

Como usar a internet de forma segura com os novos DNS da Cloudflare
Dicas
7 visualizações
Dicas
7 visualizações

Como usar a internet de forma segura com os novos DNS da Cloudflare

Carlos L. A. da Silva - 28 de novembro de 2020

Serviço oferece de forma gratuita duas opções reguladas para navegar de forma protegida.

Promoções de Jogos do Final de Semana (27/11) – Edição da Black Friday
Notícias
16 visualizações
Notícias
16 visualizações

Promoções de Jogos do Final de Semana (27/11) – Edição da Black Friday

Carlos L. A. da Silva - 27 de novembro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

Como a Nvidia está usando rede neural no lugar de codecs de vídeo
Artigos
13 visualizações
Artigos
13 visualizações

Como a Nvidia está usando rede neural no lugar de codecs de vídeo

Carlos L. A. da Silva - 25 de novembro de 2020

Maxine é uma solução de aprendizado de máquina na nuvem que reduz a quantidade de dados transmitidos, deduzindo e gerando as partes que faltam.

8 Responses

  1. Como deixar o conteúdo “oculto” como default? Neste código é necessário ocultar o conteúdo depois.

    Resposta

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (20/11)
Notícias
17 visualizações
17 visualizações

Promoções de Jogos do Final de Semana (20/11)

Carlos L. A. da Silva - 20 de novembro de 2020
Top 10 soft skills para desenvolvedores
Artigos
18 visualizações
18 visualizações

Top 10 soft skills para desenvolvedores

Carlos L. A. da Silva - 20 de novembro de 2020
Como detectar um bloqueador de anúncios usando uma linha de Javascript
Dicas
22 visualizações
22 visualizações
Promoções de Jogos do Final de Semana (13/11)
Notícias
27 visualizações
27 visualizações

Promoções de Jogos do Final de Semana (13/11)

Carlos L. A. da Silva - 13 de novembro de 2020