jQuery的动画滑动下来点击但没有备份点击

我已经搞砸了这个小小的细节几个小时了，我终于放弃了，即使我确信解决方案真的很简单。jQuery的动画滑动下来点击但没有备份点击

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

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

任何人都可以向我解释这个解决方案吗？这可能是一个明显的解决方案，但我无法弄清楚。

来源

2010-11-19 Stagen

访问以下网址： http://stackoverflow.com/questions/23138728/how-to-make-two-functions-react-on-a-click?answertab=oldest#tab-top 这是一个很好的解释 – Junske 2014-04-18 15:44:00

有.toggle()两个（或更多）的功能（而不是.click()这是刚刚使用你的第一个功能）之间循环，就像这样：

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

来源

2010-11-19 00:29:23

在每个animate（）之前，我会在其中放一个stop（），这样额外的点击不会使容器打开并关闭一堆次。 – 2010-11-19 01:49:56

@Surreal - 这是一个很短的时间，创建大量的动画积压是很困难的。否则'.stop（）'是个好主意。 – user113716 2010-11-19 02:10:13

嘿，我甚至没想过这个时间。我真的只是一个关于有弹性动画的坚持者。 :) – 2010-11-19 02:26:50

这里有一个有趣的方法。

$(".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是更清洁，更理智，应使用特别是如果你打算做任何事情更加复杂。

来源

2010-11-19 00:56:09 user113716

jQuery的动画滑动下来点击但没有备份点击

回答

相关问题