javascript - 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);
    });
});​