Dishman

6

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:

<div id="um">Clicar Aqui</div>
<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:



#um {
  margin: 3px 20px 15px; 
  -moz-box-shadow: 0px 10px 14px -7px #3e7327;
 -webkit-box-shadow: 0px 10px 14px -7px #3e7327;
 box-shadow: 0px 10px 14px -7px #3e7327;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352));
 background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%);
 background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%);
 background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%);
 background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%);
 background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0);
 background-color:#77b55a;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
 border:1px solid #4b8f29;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:arial;
 font-size:13px;
 font-weight:bold;
 padding:6px 12px;
 text-decoration:none;
 text-shadow:0px 1px 0px #5b8a3c;
}
#um:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a));
 background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%);
 background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%);
 background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%);
 background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%);
 background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0);
 background-color:#72b352;
}
#um:active {
 position:relative;
  top:1px;
}
#exemplo2 {
  width: 500px;
  border: 1px solid gold;
  padding: 5px 50px;
  background:skyBlue;
  color:blue;
}


E finalmente, o javascript do efeito:




<script type="text/javascript">
    $(document).ready(function(){
      $("#um").click(function () {
        $("#exemplo2").hide("fast");
      });
    });
</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:

<div id="quatro"><div id="dois">Esconder</div><div id="tres">Aparecer</div></div>
<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:


#quatro {
        width: 450px;
        padding: 3px 5px;
}
#dois {
 float:left;
 margin: 0 3px;
 -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
 -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
 box-shadow:inset 0px 1px 0px 0px #f29c93;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
 background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
 background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
 background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
 background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
 background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
 background-color:#fe1a00;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #d83526;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:0px 1px 0px #b23e35;
}
#dois:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
 background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
 background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
 background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
 background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
 background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0);
 background-color:#ce0100;
}
#dois:active {
 position:relative;
 top:1px;
}

#tres {
 float:left;
 margin: 0 3px;
 -moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
 -webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
 box-shadow:inset 0px 1px 0px 0px #97c4fe;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
 background:-moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
 background:-webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
 background:-o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
 background:-ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
 background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0',GradientType=0);
 background-color:#3d94f6;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #337fed;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:0px 1px 0px #1570cd;
}
#tres:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6));
 background:-moz-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
 background:-webkit-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
 background:-o-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
 background:-ms-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
 background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6',GradientType=0);
 background-color:#1e62d0;
}
#tres:active {
 position:relative;
 top:1px;
}

#exemplo3 {
 width: 500px;
 border: 1px solid gold; 
 padding-left:50px;
 background:skyBlue; 
 color:blue;
}

JavaScript:


<script type="text/javascript">
    $("#dois").click(function () {
      $("#exemplo3").hide(1500);
    });
    $("#tres").click(function () {
      $("#exemplo3").show(1000);
    });
</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.

Enviar um comentário