jquery - jQuery animate 在点击时向下滑动，但在点击时不倒退

Question

我已经把这个微小的小细节搞砸了好几个小时，尽管我确信解决方案真的非常简单，但我最终还是放弃了。

我在一个div中有一个名为“.address”的面板，带有溢出：隐藏，因此在激活该功能之前它不会显示。单击“.click”按钮时，我希望地址 div 从隐藏区域向下滑动并进入可见视图。到目前为止，这可行，但我无法弄清楚为什么它不会在第二次点击时滑回。

    $(".click").click(function(){
        $(".address").animate({top:"0"},{duration:200});
            }, function() {
        $(".address").animate({top:"-55px"},{duration:200});
    });

谁能向我解释这个问题的解决方案？这可能是一个明显的解决方案，但我无法弄清楚。

Answer 1

在.toggle()两个（或多个）函数之间循环（而不是.click()仅使用您的第一个函数），如下所示：

$(".click").toggle(function(){
    $(".address").animate({top:"0"},{duration:200});
}, function() {
    $(".address").animate({top:"-55px"},{duration:200});
});

Answer 2

这是一个有趣的方法。

$(".click").click(function() {
    var idx = 0;
    return function() {
        $(".address").animate({top: (idx = ++idx % 2) ? 0 : -55}, {duration: 200});
    };
}());

示例：http: //jsfiddle.net/jSsgM/1/

@Nick 的解决方案更干净、更明智，尤其是在您要做更复杂的事情时应该使用。