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
Este Artigo foi útil?
Então se quiser, pode pagar-me um café. ;)

Escolhe com Sabedoria:

Deixa o teu comentário no Formulário Incorporado (NOTA: As respostas directas aos comentários só são possíveis utilizando este Formulário.) , ou no Antigo Formulário em uma nova janela, ou então no Formulário em Pop Up .

LER AS REGRAS ANTES DE COMENTAR! MOSTRAR EMOTICONS
Ler Antes de Comentar ◊  As Regras dos Comentários:
  • O comentário precisa ter relação com o assunto!
  • O comentário que deixares é da tua inteira Responsabilidade!
  • Comentários anónimos São permitidos,MAS:

    • Por favor, evita comentar em MAIÚSCULAS .
    • Por favor, não faças Spam.
    • Por favor, não utilizes termos obscenos ou ofensivos.
    • Comentários considerados Spam ou ofensivos serão apagados.
◊  Para deixares a URL do teu blogue, comenta com OpenID, ou com a opção NOME/URL.
◊  Podes usar algumas tags HTML como:
  • @<strong>Nome</strong> para mencionar a quem se responde o comentário.
  • <em>Fulano disse:<i>Texto Citado</i></em> para colocar uma Citação.
  • Para inserir um link ou um vídeo do YouTube, basta só escrever o endereço URL como texto normal.
  • <i>Texto em Itálico</i>
  • <b>Texto em Negrito</b>
    • HTML EXTRA:
    • [im]URL DA IMAGEM[/im] para colocar uma imagem.
    • [ma]Texto rolando[/ma] para colocar texto rolando.
    • [si="2"]Texto com tamanho determinado[/si] Altera o numero para determinar o tamanho da letra.
    • [co="red"]Texto em cor[/co] Altera a cor do texto.
    • [ce]Texto centrado[/ce] centraliza o texto.
    • [ma+]Texto rolando para a direita[/ma+]
    • [box]"encaixotar" o texto[/box]
    • [mark]Texto Marcado[/mark]
    • [card="blue"]Texto com fundo[/card] Altera a cor de fundo do comentário.
    • [im#]URL DA IMAGEM[/im] para colocar uma imagem que ocupe TODA a largura.
    • [hi="yellow"]Texto Destacado[/hi]
  • ATENÇÃO: Comentários com imagens ou vídeos com conteúdo ofensivo ou inadequado serão REMOVIDOS, SEM EXCEPÇÃO!!!
FECHAR
NOTA: os códigos dos emoticons devem ser inseridos separados das restantes palavras ou pontuação. OCULTAR EMOTICONS

0 comentários :

Enviar um comentário