Informática Numaboa - Tutoriais e Programação

jQuery - Esconde-esconde

Qua

3

Dez

2008


18:10

  • Imprimir
(10 votos, média 4.70 de 5) 


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.

{tag}{/tag}

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 smile

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":