jQuery的取消和重新設定幻燈片動畫

我正在寫一些jQuery的用於切換的div，在僞代碼，應做到以下幾點：jQuery的取消和重新設定幻燈片動畫

item.click 
    check to see if the div I want to expand is hidden 
    if so 
     slideup all of the divs 
     when finished... 
     slide down the one I want to expose

有跡象表明，可以點擊（在這種特殊情況下的多個項目，單選按鈕）。

我可以得到所有這些工作（感謝來自stockOverflow這裏的優秀人士的一些幫助）。

我還有一個問題，就是如果點擊一個項目，然後在過程完成之前點擊另一個項目，動畫開始堆疊並變得困惑。我可以通過在觸發器項目之間來回快速點擊來中斷顯示。我試着通過實施來解決這個「點擊後，如果事情動畫，停止，然後隱藏它們全部重置事」：

$('.toggleTriggersWrapper .toggleTrigger') 
    .click(function(){ 

     var $togglePanesWrapper = $(this).closest('.toggleTriggersWrapper').next('.togglePanesWrapper').eq(0); 

     var IDtoShow = '#' + this.className.match(/toggle\-.+?\b/); 
     var $IDtoShow = $(IDtoShow); 

     /* the next 3 lines are my attempted 'fix' */ 
     if($togglePanesWrapper.children('.togglePane').is(":animated")) { 
      $togglePanesWrapper.children('.togglePane').hide().stop(); 
     }; 

     $togglePanesWrapper.children('.togglePane').not(IDtoShow).slideUp('fast', function(){ 

       /* great fix for dealing with multiple animations as found here: http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/ */ 
       var wait = setInterval(function() { 
        if(!$togglePanesWrapper.children('.togglePane').is(":animated")) { 
         console.log('if is animated'); 
         clearInterval(wait); 
         $togglePanesWrapper.children('.togglePane').not(IDtoShow).hide(); 
         $togglePanesWrapper.children(IDtoShow).slideDown('slow'); 
        } 
       }, 200);     

      }); 
    })

與上面的修復會發生什麼情況是，動畫做罷，但我的切換divs的高度在被告知要停止的地方被卡住了。就好像div滑落，我點擊一個觸發'停止'的不同項目，因此，div現在認爲它只是實際的一半。

對此的解決方法的任何想法？

來源

2009-12-10 DA.

你需要傳遞額外的參數給stop method：

$togglePanesWrapper.children('.togglePane').hide().stop(true, true);

第一個參數（clearQueue）告訴jQuery來清除動畫隊列，停止任何排隊的動畫。

第二個參數（gotoEnd）告訴jQuery完成當前的動畫。

來源

2009-12-10 16:27:52

@Jeff對我來說沒有RTFMing記錄10次。 ; O）我完全錯過了stop（）有參數的事實。謝謝您的幫助。這工作！ – 2009-12-10 16:38:36

Hooray！ jQuery似乎常常做正確的事情，很容易忘記閱讀它的方法。 :) – 2009-12-10 16:44:03

較新的帖子是正確的...你應該清楚隊列我改變了我的答案以反映這一點。

嘗試：

$togglePanesWrapper.children('.togglePane').hide().stop(true, true);

http://docs.jquery.com/Effects/stop

來源

2009-12-10 16:26:22 prodigitalson

謝謝@prodigitalson絕對是答案！ – 2009-12-10 16:39:26

jQuery的取消和重新設定幻燈片動畫

回答

相關問題