jQuery 动画在单击时向下滑动，但在单击时不向后滑动

发布于 2024-10-03 18:46:00 字数 455 浏览 1 评论 0原文

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

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

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

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

原文

I've messed around with this teeny little detail for hours now and I've finally given up even though I'm sure the solution is really, really simple.

I have a panel called ".address" in a div with overflow:hidden so it isn't shown before the function is activated. When clicking on the button ".click" I want the address div to slide down from the hidden area and into visible view. So far this works, but I cannot figure out why it won't slide back up on the second click.

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

Can anyone explain to me the solution to this? It's probably an obvious solution but I just cannot figure it out.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

明天过后 2024-10-10 18:46:00

有 .toggle() 在两个（或多个）之间循环函数（而不是 .click() ，它只是使用您的第一个函数），像这样：

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

There's .toggle() to cycle between two (or more) functions (rather than .click() which is just using your first function), like this:

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

回复收藏 0 原文

半﹌身腐败 2024-10-10 18:46:00

这是一个有趣的方法。

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

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

@Nick 的解决方案< /a> 更干净、更明智，特别是当您要做更复杂的事情时应该使用它。

Here's a fun approach.

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

Example: http://jsfiddle.net/jSsgM/1/

@Nick's solution is cleaner and more sensible, and should be used especially if you're going to be doing anything more complex.

回复收藏 0 原文

~没有更多了~