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's solution更清洁，更明智，特别是如果你要做更复杂的事情，应该特别使用。

jQuery动画在点击时向下滑动，但在点击时不会备份

2 个答案: