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...

Olha eu aqui.

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

Queres ler outro artigo ao calhas?