Qua

03

Dez

2008

17:10

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

<script type="text/javascript">
$(document).ready(
   function() {
      $(".escondido").hide();  // esconde todos os elementos de classe escondido
                               // para que não apareçam quando a página for
                               // carregada (quando o objeto DOM estiver pronto)
      $("a#abre").click(       // o link que você acabou de clicar tem a id abre
         function(event) {
            $(".escondido").show("slow"); // que, quando clicado, mostra tudo
                                          // que tiver a classe escondido
            return false;
         }
      )
   }
);
</script>

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

...
<hr class="escondido">
...
<p class="escondido">Para começar, não esqueça de incorporar
a biblioteca jQuery... </p>
...
<div class="escondido">
...
</div>