0 Compartilhamentos 596 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

Você pode se interessar

Promoções de Jogos do Final de Semana (21/02) – Edição da Folia!
Notícias
13 visualizações
Notícias
13 visualizações

Promoções de Jogos do Final de Semana (21/02) – Edição da Folia!

Carlos L. A. da Silva - 21 de fevereiro de 2020

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

A Microsoft salvou um filme inteiro em um pedaço de vidro e isso é o futuro chegando
Artigos
26 visualizações
Artigos
26 visualizações

A Microsoft salvou um filme inteiro em um pedaço de vidro e isso é o futuro chegando

Carlos L. A. da Silva - 21 de fevereiro de 2020

Project Silica guardou o filme Superman, de 1978, em um pedaço de quartzo de vidro.

Como baixar o Windows 10 de graça a partir de versões anteriores
Dicas
15 visualizações
Dicas
15 visualizações

Como baixar o Windows 10 de graça a partir de versões anteriores

Carlos L. A. da Silva - 18 de fevereiro de 2020

O suporte para o Windows 7 terminou e você não vai querer ficar desprotegido e sem correção de falhas.

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

15 anos de Google Maps
Artigos
22 visualizações
22 visualizações

15 anos de Google Maps

Carlos L. A. da Silva - 16 de fevereiro de 2020
Promoções de Jogos do Final de Semana (14/02)
Notícias
23 visualizações
23 visualizações

Promoções de Jogos do Final de Semana (14/02)

Carlos L. A. da Silva - 14 de fevereiro de 2020
Como consertar a busca do Windows 10
Dicas
25 visualizações
25 visualizações

Como consertar a busca do Windows 10

Carlos L. A. da Silva - 12 de fevereiro de 2020
Promoções de Jogos do Final de Semana (07/02)
Notícias
38 visualizações1
38 visualizações1

Promoções de Jogos do Final de Semana (07/02)

Carlos L. A. da Silva - 7 de fevereiro de 2020