jQuery animez glisser vers le bas sur le clic, mais pas sur le clic

Question

Je me suis amusé avec ce petit détail minuscule pendant des heures maintenant et j'ai finalement abandonné même si je suis sûr que la solution est vraiment très simple.

J'ai un panneau appelé ".address" dans un div avec débordement: caché donc il n'est pas affiché avant que la fonction soit activée. Lorsque vous cliquez sur le bouton ".click", je veux que l'adresse div descende de la zone cachée et dans la vue visible. Jusqu'à présent, cela fonctionne, mais je n'arrive pas à comprendre pourquoi il ne va pas glisser vers le haut sur le deuxième clic.

$(".click").click(function(){ 
     $(".address").animate({top:"0"},{duration:200}); 
      }, function() { 
     $(".address").animate({top:"-55px"},{duration:200}); 
    }); 

Quelqu'un peut-il m'expliquer la solution à ce problème? C'est probablement une solution évidente, mais je ne peux tout simplement pas comprendre.

Answer 1

Il y a .toggle() pour choisir entre deux (ou plus) des fonctions (plutôt que .click() qui est juste en utilisant votre première fonction), comme ceci:

$(".click").toggle(function(){ 
    $(".address").animate({top:"0"},{duration:200}); 
}, function() { 
    $(".address").animate({top:"-55px"},{duration:200}); 
}); 

Answer 2

est ici une approche ludique.

$(".click").click(function() { 
    var idx = 0; 
    return function() { 
     $(".address").animate({top: (idx = ++idx % 2) ? 0 : -55}, {duration: 200}); 
    }; 
}()); 

Exemple:http://jsfiddle.net/jSsgM/1/

@Nick's solution est plus propre et plus sensible, et devrait être utilisé surtout si vous allez faire quelque chose de plus complexe.