2

私はばかなので、ここに行きます...

問題：製品を調べるためにスライドショータイプのナビゲーションシステムを使用しています。アニメーションが終了する前に次/前の矢印が複数回クリックされるまで、すべてが順調です。それを複数回クリックすると、物事は完全にバグアウトし、地獄を通る不可逆的な水平スパイラルに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>

どんな助けでも=私からのセックス崇拝。

ありがとうございました！

4

2 に答える 2

1

アニメーションの開始時とアニメーション終了のコールバック関数で設定したフラグanimatingを設定します。次に、フラグの状態をテストして、次/前のロジックをトリガーするかどうかを判断します。truefalse

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() });
        }
    }
于 2012-05-23T01:21:59.633 に答える
0

変数をとして定義し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);
        };
});

それを行うためのより良い方法は、.addClassand.removeClass関数を使用し、そのための条件を設定することです。

jQueryすべてのアニメーションが終了したかどうかをチェックする機能はないと思います。.animate後続のfunction(){ }中括弧の内側にあるものによって、関数が持つコールバックを使用する必要があります。

于 2012-05-23T01:27:50.943 に答える