Inque

0

jQuery: o Efeito hide

Continuando a mostrar alguns efeitos do jQuery, e no seguimento do efeito que faz aparecer algo escondido, hoje como é lógico vou mostrar o efeito contrario ou seja como fazer algo desaparecer...

Geralmente, é mais comum ver-se este efeito utilizado em conjunto com o de ontem: jQuery: O Efeito show .

Por exemplo neste blogue utilizo uma variação destes dois efeitos para esconder e fazer aparecer os códigos em alguns tutoriais.

Então, primeiro para ver como o efeito Esconder (hide) funciona:

Clique Aqui

Se clicar acima, eu desapareço... :(


Como no exemplo de ontem já expliquei como funciona o código, hoje vou só mostrar qual o código utilizado no exemplo acima:

O HTML:

ver código
imprimir?
1<div id="um">Clicar Aqui</div>
2<div id="exemplo2">Se clicar acima, eu desapareço... <img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" alt=":(" title=":(" /></div>


O CSS é basicamente o mesmo do exemplo de ontem, mas como hoje quis demonstrar como se pode colocar uma div para dar inicio ao efeito em vez dum botão, coloquei também estilos nessa div:


ver código
imprimir?
01#um {
02  margin: 3px 20px 15px;
03  -moz-box-shadow: 0px 10px 14px -7px #3e7327;
04 -webkit-box-shadow: 0px 10px 14px -7px #3e7327;
05 box-shadow: 0px 10px 14px -7px #3e7327;
06 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352));
07 background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%);
08 background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%);
09 background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%);
10 background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%);
11 background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
12 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0);
13 background-color:#77b55a;
14 -moz-border-radius:4px;
15 -webkit-border-radius:4px;
16 border-radius:4px;
17 border:1px solid #4b8f29;
18 display:inline-block;
19 cursor:pointer;
20 color:#ffffff;
21 font-family:arial;
22 font-size:13px;
23 font-weight:bold;
24 padding:6px 12px;
25 text-decoration:none;
26 text-shadow:0px 1px 0px #5b8a3c;
27}
28#um:hover {
29 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a));
30 background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%);
31 background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%);
32 background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%);
33 background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%);
34 background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
35 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0);
36 background-color:#72b352;
37}
38#um:active {
39 position:relative;
40  top:1px;
41}
42#exemplo2 {
43  width: 500px;
44  border: 1px solid gold;
45  padding: 5px 50px;
46  background:skyBlue;
47  color:blue;
48}


E finalmente, o javascript do efeito:



ver código
imprimir?
1<script type="text/javascript">
2    $(document).ready(function(){
3      $("#um").click(function () {
4        $("#exemplo2").hide("fast");
5      });
6    });
7</script>


Termino com uma pequena demonstração do efeito Esconder utilizado em conjunto com o efeito Show (Aparecer):


Esconder
Aparecer


Se clicar acima, eu desapareço... :(


Códigos da demonstração acima:

Ver Código

HTML:

ver código
imprimir?
1<div id="quatro"><div id="dois">Esconder</div><div id="tres">Aparecer</div></div>
2<div id="exemplo3">Se clicar acima, eu desapareço... <img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" alt=":(" title=":(" /></div>

CSS:

ver código
imprimir?
01#quatro {
02        width: 450px;
03        padding: 3px 5px;
04}
05#dois {
06 float:left;
07 margin: 0 3px;
08 -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
09 -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
10 box-shadow:inset 0px 1px 0px 0px #f29c93;
11 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
12 background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
13 background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
14 background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
15 background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
16 background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
17 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
18 background-color:#fe1a00;
19 -moz-border-radius:6px;
20 -webkit-border-radius:6px;
21 border-radius:6px;
22 border:1px solid #d83526;
23 display:inline-block;
24 cursor:pointer;
25 color:#ffffff;
26 font-family:arial;
27 font-size:15px;
28 font-weight:bold;
29 padding:6px 24px;
30 text-decoration:none;
31 text-shadow:0px 1px 0px #b23e35;
32}
33#dois:hover {
34 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
35 background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
36 background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
37 background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
38 background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
39 background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
40 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0);
41 background-color:#ce0100;
42}
43#dois:active {
44 position:relative;
45 top:1px;
46}
47 
48#tres {
49 float:left;
50 margin: 0 3px;
51 -moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
52 -webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
53 box-shadow:inset 0px 1px 0px 0px #97c4fe;
54 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
55 background:-moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
56 background:-webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
57 background:-o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
58 background:-ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
59 background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
60 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0',GradientType=0);
61 background-color:#3d94f6;
62 -moz-border-radius:6px;
63 -webkit-border-radius:6px;
64 border-radius:6px;
65 border:1px solid #337fed;
66 display:inline-block;
67 cursor:pointer;
68 color:#ffffff;
69 font-family:arial;
70 font-size:15px;
71 font-weight:bold;
72 padding:6px 24px;
73 text-decoration:none;
74 text-shadow:0px 1px 0px #1570cd;
75}
76#tres:hover {
77 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6));
78 background:-moz-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
79 background:-webkit-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
80 background:-o-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
81 background:-ms-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
82 background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
83 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6',GradientType=0);
84 background-color:#1e62d0;
85}
86#tres:active {
87 position:relative;
88 top:1px;
89}
90 
91#exemplo3 {
92 width: 500px;
93 border: 1px solid gold;
94 padding-left:50px;
95 background:skyBlue;
96 color:blue;
97}

JavaScript:

ver código
imprimir?
1<script type="text/javascript">
2    $("#dois").click(function () {
3      $("#exemplo3").hide(1500);
4    });
5    $("#tres").click(function () {
6      $("#exemplo3").show(1000);
7    });
8</script>

Ocultar Código



Até Breve. :-F
Aspirante a Artista Digital, Moderador no site Heromorph desde 2007. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal

Comentários

Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.

Mas antes de comentarem, leiam as minhas Regras dos Comentários.

Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.

Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.

Enviar um comentário