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

Jquery切换不能正常工作？

1 个答案: