Detalhes

Categoria: Javascript

Atualização: Segunda, 08 Fevereiro 2010 22:13

Autor: vovó Vicki

Acessos: 8803

O efeito hide da jQuery faz com que elementos sejam retirados da tela e o efeito show faz com que apareçam numa transição suave. Usando este efeito podemos fazer sumir ou aparecer parágrafos, elementos div, links e tudo mais que você conseguir inventar.

O efeito hide para esconder e o efeito show para mostrar o que queremos

Vamos para um exemplo bem simples, mas de grande efeito. Vamos criar um parágrafo, como este aqui, onde podemos colocar um link que dispara a função show (mostrar) da jQuery para mostrar um ou mais parágrafos (ou outros elementos com a mesma classe) escondidos. Se você quiser saber qual é o código do script para fazer esta mágica, clique aqui.

Para começar, não esqueça de incorporar a biblioteca jQuery à sua página. Depois disto, é só criar este pequeno script e identificar os elementos que devem ser mostrados no corpo do documento quando clicarmos num link com a id="abre". Os elementos escondidos no texto são da classe "escondido". Nem de CSS vamos precisar desta vez

A primeira coisa que acontece assim que o objeto DOM tiver sido carregado é ocultar todos os elementos da classe "escondido" - $(".escondido").hide(). Depois é adicionado um evento click ao elemento a cuja id é "abre". Assim que este evento ocorrer, é acionada a função que chama show(), a qual torna torna os elementos ocultos em elementos visíveis.

Além de show() e hide(), existe a função toggle() (inverter) que troca a propriedade visible dos elementos. Estas três funções podem receber os parâmetros "slow" (lento), "normal" ou "fast" (rápido). Também podem receber um parâmetro numérico, que indica o número de milisegundos que desejamos, por exemplo show(1000) faz com que os elementos sejam mostrados em 1 segundo. Quando o parâmetro for numérico não use aspas.

Observe que na função do click foi adicionado um return false. Isto é para que o link de chamada seja desativado para evitar que o usuário seja direcionado para uma outra página.

Na seção body da página estão vários elementos classificados como "escondido":