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é. ;)

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

2 comentários :

NOTA: os códigos dos emoticons devem ser inseridos separados das restantes palavras ou pontuação. OCULTAR EMOTICONS
  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