如何在动画完成之前停止按下导航按钮？

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。然后只需测试标志的状态，以确定是否触发了下一个/上一个逻辑。

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(){ } 大括号内的内容即可。