JQuery—Efeitos Simples com Hide() e Show()
Os efeitos que irei mostrar aqui hoje são simples de trabalhar e com um pouco de imaginação pode se tornar uma grande arma para melhorar a aparência da sua página, bom iremos falar sobre duas funções desse poderoso framework, a função hide() e show() .
Vamos começar com a função hide(), ela tem como objetivo esconder algum elemento(div, imagem, link), exemplo:
Primeiro Crie o arquivo “hide.html”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <html> <head> </head> <body> <a href="#">Click aqui para sumir</a> </body> </html>
Depois Coloque esse código entre as tags <head> </head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// Aqui falamos para carregar todos as funções antes do documento
$(document).ready(function(){
// Aqui setamos os links da página para quando forem clicados sumirem
$("a").click(function () {
$(this).hide();
return true;
});
});
</script>
E veja que ao clicar no link ele some ou seja ele executa a função hide(), porém a função hide tem mas alguns parâmetros para melhorar o efeito , hide( speed, [callback] ), iremos ver o parâmetro speed, ele é responsável pela velocidade da execução do hide()
Usando o mesmo arquivo html, substitua somente o código JQuery:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// Aqui falamos para carregar todos as funções antes do documento
$(document).ready(function(){
// Aqui setamos os links da página para quando forem clicados sumirem
$("a").click(function () {
// Aqui definimos uma velocidade para o evento HIDE()
$(this).hide("slow");
return true;
});
});
</script>
Usando o código acima você fará com que o efeito seja executado mais devagar graças ao parâmetro speed configurado como “slow”, a função hide pode receber para o parâmetro speed: Uma string representando uma das três velocidades predefinidas ( “slow”, “normal”, ou “fast”) ou o número de milissegundos para executar a animação.
Agora vamos falar sobre a função show():
A a função show tem como objetivo mostrar algum elemento, ela também aceita o parâmetro speed como a hide, vamos a um exemplo:
Primeiro Crie o arquivo “show.html”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> </head> <body> <a href="#">Clique aqui para aparecer uma frase</a> <p>Muito simples e legal né? com JQuery o lema é "ESCREVER MENOS E FAZER MAIS"</p> </body> </html>
Agora coloque o código abaixo entre<head> e </head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// Aqui falamos para carregar todos as funções antes do documento.
$(document).ready(function(){
// Aqui sumimos com o elemento "p(parágrafo)" da página .
$("p").hide();
// Depois instruimos que ao clicar no link o elemento "p" irá aparecer .
$("a").click(function () {
$("p").show("slow");
});
});
</script>
Para mudar a velocidade da execução do efeito basta fazer igual a função hide(), abaixo vai um link com mais exemplos: Aqui
Bom foi meu primeiro tutorial falando sobre JQuery, qualquer opnião sobre o assunto, avisos de erros ^^, ou agradecimentos pode comentar.
Últimos Comentários