jQuery: O efeito toogle

Continuando a mostrar alguns efeitos do jQuery, e no seguimento dos efeitos show e hide, onde no ultimo artigo mostrei um exemplo de como combinar os dois efeitos.

Então hoje mostrar um efeito que também combina esses dois mas utilizando só um elemento para activar: O Efeito toogle.

Primeiro, para exemplificar:

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

ou...

Clique Aqui

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

Basicamente o efeito toogle esconde ou mostra algo, ou seja se algo for visível, será ocultado e vice-versa. Mas como podem ver no segundo exemplo, também funciona em simultâneo com elementos da mesma classe, escondendo o que está visível ao mesmo tempo que revela o que está oculto...
Existem muitos mais exemplos que podia colocar aqui, utilizando variações deste efeito mas quis manter a coisa simples. :)
Abaixo os códigos utilizados nestes exemplos:

HTML
<div id="um">Clique Aqui</div>
<div id="exemplo-toogle">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>

<div id="dois">Clique Aqui</div>
<div class="exemplo-toogle">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>
<div class="exemplo-toogle" style="display:none">Olha eu aqui. <img class="emoticon" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" alt=":D" title=":D" /></div>

No HTML acima, reparem que para o primeiro exemplo utilizo div ID(#) e que no segundo já coloquei div class(.). A razão para essa alteração entre os dois exemplos é porque no primeiro só existe um elemento para colocar o efeito, enquanto no segundo já existem dois e nesse caso temos que usar div class(.) porque as div ID(#) não podem ter nomes iguais na mesma página.
Reparem também na linha 6, como incluí no próprio HTML o CSS style="display:none". É esse estilo que esconde essa div para que o efeito funcione neste caso.
Abaixo o CSS com os estilos dos exemplos que mantive sem alteração para ambos:

CSS
#um,#dois{
 margin: 3px 20px 15px;
 -moz-box-shadow: 0px 10px 14px -7px #276873;
 -webkit-box-shadow: 0px 10px 14px -7px #276873;
 box-shadow: 0px 10px 14px -7px #276873;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
 background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
 background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
 background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
 background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
 background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
 background-color:#599bb3;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:arial;
 font-size:20px;
 font-weight:bold;
 padding:13px 32px;
 text-decoration:none;
 text-shadow:0px 1px 0px #3d768a;
}
#um:hover,#dois:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
 background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
 background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
 background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
 background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
 background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
 background-color:#408c99;
}
#um:active,#dois:active {
 position:relative;
 top:1px;
}
#exemplo-toogle, .exemplo-toogle {
   width: 500px;
   border: 1px solid gold;
   padding: 5px 50px; 
   display:none;
   background:skyBlue;
   color:blue;
}

E finalmente o javascript que faz o efeito funcionar:

Javascript
<script type='text/javascript'>
$(document).ready(function(){
  $( "#um" ).click(function() { 
    $( "#exemplo-toogle" ).toggle( "slow" );
  }); 
  $( "#dois" ).click(function() {
    $( ".exemplo-toogle" ).toggle( "600" );
  });  
});
</script>

O javascript de cada exemplo começa nas linhas destacadas respectivamente...

Espero que tenha conseguido mostrar como o efeito toogle funciona, mas se tiverem alguma questão estejam à vontade para perguntar. :)

Até Breve. :-F

Este Artigo foi útil?
Então se quiser, pode pagar-me um café. ;)

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.

  1. Gostei de ler... e ontem teria servido em vez de apagar o HTML (depois de ter feito copy), o que é certo é que ao recolocar esse mesmo HTML, as coisas ficaram ligeiramente alteradas.

    Abraço!

    ResponderEliminar
    Respostas
    1. Jota,
      As dicas que publico são mais voltadas pró Blogger, mas os princípios em que se baseiam são universais e mesmo no Tumblr devem funcionar. ;)
      Abraço. :)

      Eliminar

Enviar um comentário