如何停止导航按钮被按下直到动画完成？

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(){ }括号内就是这样。