Javascript Jquery切换是否工作不正常？

我有一个我想点击的按钮（在我的例子中是“.circle”）。当我单击它时，我希望#data div淡入，然后使用“边距顶部：50px”设置动画。然后，当用户第二次单击切换按钮时，其动画设置为“边距顶部：0px”，然后淡出

然而，我遇到的问题是，当我第三次单击切换时，我希望它再次运行第一个函数。但是，它却做了一些奇怪的事情，在第一个函数再次运行之前，它会重置到50像素的余量上限

我真的很感激你能帮我。这是我用相同的代码编写的一个JSFIDLE，在多次单击它之后，您将看到我遇到的问题。另一个问题是，当你第一次点击它时，它不起作用，但在第二次点击时起作用

我还将在下面发布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);
            }
          );

        });

});​

删除

。单击（）

函数。单击通过

.toggle（）

函数暗示

删除

。单击（）

函数。单击通过

.toggle（）

函数暗示

---

是的，这就是解决办法！工作完美感谢这么多，简单的解决方案。还在习惯Jquery:）坚持住！jQuery非常强大！是的，这就是解决办法！工作完美感谢这么多，简单的解决方案。还在习惯Jquery:）坚持住！jQuery非常强大！

$(".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);
    });
});​