javascript - Jquery 切换不能正常工作？

Question

我有一个要单击的按钮(在我的例子中是“.circle”)。单击它时，我希望#data div 淡入然后使用“margin-top:50px”进行动画处理。然后，当用户第二次单击切换按钮时，它会动画到“margin-top:0px”然后淡出。

然而，我遇到的问题是，当我第三次单击切换按钮时，我希望它再次运行第一个功能。但相反，它做了一些奇怪的事情，并在第一个函数再次运行之前重置为 50px 的 margin-top。

我真的很感激能提供一些帮助。这是我用相同代码编写的 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);
    });
});​