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。然后只测试标志的状态以确定是否触发next / 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(){ }括号中的内容。

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

2 个答案: