Question

我是个白痴,所以现在...

The problem: I m using a slideshow type navigation system for looking through products. All is well and good until the next/previous arrows are clicked more than once before the animation has finished. Clicking it more than once causes the thing to completely bug out and sends the divs into an irreversible horizontal spiral through Hell. I was wondering if there were a way to stop the user from clicking the next/previous arrows more than once so that the slideshow navigation doesn t whack out.

代码:

 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

设置一个在动画启动时被设定为 true 的标记的标记, 在动画结尾回调功能中被设定为 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 动画完成 = " no"; , 一旦完成, 请使用 animmation 完成 = 是; 。那么, 一旦单击进程完成, 请使用条件词 if (animation finished = "yes") 。

最好把它变成布林变量, 这样它就是 bool 动画完成= filished; 或 true

或适当的方法来做它。

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

更好的方法就是使用 .addClass 和 .removeClass 功能,并对此附加条件。

jQuery 我认为没有功能检查每个动画是否都已完成。您只需要使用 < code>. animate 函数的回调, 后面的 < code> 函数( { { { { / code > ) / code) 牙套内的内容。

友情链接