Jquery切換不能正常工作？

Question

我有一個我想點擊的按鈕（在我的情況下，這是'.circle'）。 當我點擊它時，我想讓#data div淡入然后用'margin-top：50px'動畫。 然后，當用戶第二次單擊切換按鈕時，它會設置為“margin-top：0px”，然后淡出。

然而，我遇到的問題是，當我第三次單擊切換時，我希望它再次運行第一個函數。 但相反，它會做一些奇怪的事情並在第一個函數再次運行之前重置為50px的上限。

我真的很感激這方面的一些幫助。 這是一個JSFiddle我掀起了相同的代碼，你會看到我多次點擊后遇到的問題。 另一個問題是，當你第一次點擊它時它不起作用，但第二次點擊時工作。

http://jsfiddle.net/sN8Tn/

我也發布了下面的jquery：

$(".button").click(function(){

        $(".button").toggle(

        function(){  
            $("#showme").fadeIn(500, 
            function(){
              $("#showme").animate({ "margin-top" : "50px" }, 500, 'linear');
            }
          );

        },

        function(){

          $("#showme").animate({ "margin-top" : "0px" }, 500, 'linear',
            function(){
              $("#showme").fadeOut(500);
            }
          );

        });

});​

Answer 1

刪除.click()函數。 點擊暗示了.toggle()函數。 jQuery .toggle（） jsFiddle

$(".button").toggle(
function() {
    $("#showme").fadeIn(500, function() {
        $("#showme").animate({
            "margin-top": "50px"
        }, 500, 'linear');
    });
}, function() {
    $("#showme").animate({
        "margin-top": "0px"
    }, 500, 'linear', function() {
        $("#showme").fadeOut(500);
    });
});​