0

私のウェブサイトのいくつかのスライドを移動するこれらの「前へ」と「次へ」のボタンがあります。いずれかをクリックすると、次または前のスライドに移動し、css3 transition プロパティを使用してアニメーション化し、スライド コンテナーの left プロパティ += または -= 800px を変更します。

#sliding-container {
position: relative;
left: -1600px;

transition: all 2s ease;
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
}

.slide {
width: 800px; height: 500px;
background-color: white;

transition: all 2s ease;
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
}

これはjsです:_

    function slide(direction) {
            if (direction == 'prev') {
                    $("#sliding-container").css('left', '+=800px');

            }

            else if (direction == 'next') {
                    $("#sliding-container").css('left', '-=800px');

            }
        }

このスライド関数は onclick:_ と呼ばれます

        <div class="fade" id="fade1" onclick="slide('prev')"><</div>
        <div class="fade" id="fade2" onclick="slide('next')">></div>

問題

しかし、問題は、次または前のボタンをすばやく 2 回クリックすると、めちゃくちゃになることです。そのため、2 秒が経過するまで (つまり、遷移が完了するまで)、クリックしても関数が再度実行されないようにしたいのです。どうやってやるの？

4

2 に答える 2

0

ボタンがクリックされたときに、running などの変数を true に設定できます。次に、次のようにアニメーションの終わりにバインドする必要があります。

OBJECT.bind('animationend webkitAnimationEnd',function(e){ running = false; });

そうすれば、遅延やタイムアウトをいじる必要がなく、完了したことが通知されるのを待つことができます。

次に、クリックすると、アニメーションを実行する前に、現在実行中かどうかを確認できます。

于 2013-04-10T16:06:12.177 に答える