如何停止導航按鈕被按下直到動畫完成？

Question

我是個白癡，所以在這裏...

問題： 我使用幻燈片類型導航系統來查看產品。一切都很好，直到在動畫完成之前多次點擊下一個/前一個箭頭。點擊它不止一次會導致事情完全漏洞，並通過地獄將div發送到不可逆轉的水平螺旋。我想知道是否有辦法阻止用戶多次點擊下一個/上一個箭頭，以便幻燈片導航不會出錯。

代碼：

var SlideWidth = 305; 
    var SlideSpeed = 1000; 

    $(document).ready(function() { 
     // set the prev and next buttons display 
     SetNavigationDisplay(); 
    }); 

    function CurrentMargin() { 
     // get current margin of slider 
     var currentMargin = $("#slider-wrapper").css("margin-left"); 

     // first page load, margin will be auto, we need to change this to 0 
     if (currentMargin == "auto") { 
      currentMargin = 0; 
     } 

     // return the current margin to the function as an integer 
     return parseInt(currentMargin); 
    } 

    function SetNavigationDisplay() { 
     // get current margin 
     var currentMargin = CurrentMargin(); 

     // if current margin is at 0, then we are at the beginning, hide previous 
     if (currentMargin == 0) { 
      $("#PreviousButton").hide(); 
     } 
     else { 
      $("#PreviousButton").show(); 
     } 

     // get wrapper width 
     var wrapperWidth = $("#slider-wrapper").width(); 

     // turn current margin into postive number and calculate if we are at last slide, if so, hide next button 
     if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) { 
      $("#NextButton").hide(); 
     } 
     else { 
      $("#NextButton").show(); 
     } 
    } 

    function NextSlide() { 
     // get the current margin and subtract the slide width 
     var newMargin = CurrentMargin() - SlideWidth; 

     // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation. 
     $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function() { SetNavigationDisplay() }); 

} 

    function PreviousSlide() { 
     // get the current margin and subtract the slide width 
     var newMargin = CurrentMargin() + SlideWidth; 

     // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation. 
     $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function() { SetNavigationDisplay() }); 
    } 

和導航鍵：

<a href="javascript:void(0)" onclick="PreviousSlide()" id="PreviousButton" style="padding-right:40px;"><img src="IMGS/arrow2.png"></a><a href="javascript:void(0)" onclick="NextSlide()" id="NextButton" style="padding-right:40px;"><img src="IMGS/arrow.png"></a> 

從我任何幫助=性崇拜。

謝謝！

Answer 1

設置一個名爲animating的標誌，在動畫開始時設置爲true，在動畫結束回調函數中設置爲false。然後，只需測試該標誌的狀態以確定是否觸發下一個/ prev邏輯。

var animating = false; 

// ...SNIP... 

    function NextSlide() { 
     if (!animating) { 
      animating = true; 

      // get the current margin and subtract the slide width 
      var newMargin = CurrentMargin() - SlideWidth; 

      // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation. 
      $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function() { animating = false; SetNavigationDisplay() }); 
     } 
    } 

    function PreviousSlide() { 
     if (!animating) { 
      animating = true; 

      // get the current margin and subtract the slide width 
      var newMargin = CurrentMargin() + SlideWidth; 

      // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation. 
      $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function() { animating = false; SetNavigationDisplay() }); 
     } 
    } 

Answer 2

定義爲var animationFinished = "no";，一旦完成一個變量，讓它成爲animationFinished = yes;。然後有一個條件說if (animationFinished == "yes")一旦點擊過程完成。

這是更好地使一個布爾變量，因此，它的bool animationFinished = false;或true

或者適當的方式做到這一點是。

$("#PreviousButton").click({ 
    $("#PreviousButton").fadeOut(300); 
    $("#slider-wrapper").animate({ 
     marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', 
    ), 5000, function() { 
     // Animation complete. 
     SetNavigationDisplay(); 
     $("#PreviousButton").fadeIn(300); 
     }; 
}); 

一個更好的辦法來做到這一點，是使用.addClass和.removeClass功能，並具有該條件語句。

jQuery我不認爲有一個函數來檢查每個動畫是否完成。您只需使用.animate函數具有的回調函數，後面的function(){ }括號內就是這樣。