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的動畫滑動下來點擊但沒有備份點擊

回答

相關問題