jQuery animieren rutschen auf Klick, aber nicht auf Klick zurück

Question

Ich habe stundenlang mit diesem kleinen Detail des Teeny herumgemacht und ich habe schließlich aufgegeben, obwohl ich mir sicher bin, dass die Lösung wirklich, wirklich einfach ist.

Ich habe ein Panel namens ".Adresse" in einem div mit Überlauf: versteckt, so dass es nicht angezeigt wird, bevor die Funktion aktiviert ist. Wenn ich auf die Schaltfläche ".click" klicke, möchte ich, dass die Adress-Div von dem versteckten Bereich nach unten in die sichtbare Ansicht gleitet. Bis jetzt funktioniert das, aber ich kann nicht herausfinden, warum es beim zweiten Klick nicht nach oben rutschen wird.

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

Kann mir jemand die Lösung dafür erklären? Es ist wahrscheinlich eine offensichtliche Lösung, aber ich kann es einfach nicht herausfinden.

Answer 1

Es gibt .toggle(), um zwischen zwei (oder mehr) Funktionen (statt .click() der gerade Ihre erste Funktion), wie folgt aus:

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

Answer 2

Ist hier ein Spaß Ansatz.

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

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

@Nick's solution ist sauberer und sinnvoll und sollte vor allem verwendet werden, wenn Sie vorhaben, etwas komplexer zu tun.