3630 registros
0 hoje
14 nesta semana
4 neste mês|
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 queremosVamos 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> |
| Última atualização ( Seg, 08.02.2010 21:13 ) |