1 
//this code animates the divs to the left after every 5 secs
$(document).ready(function() {

    var refreshId = setInterval(function() {
        $('.box').each(function() {
            if ($(this).offset().left < 0) {
                $(this).css("left", "150%");
            } else if ($(this).offset().left > $('#container').width()) {
                $(this).animate({
                    left: '50%'
                }, 500);
            } else {
                $(this).animate({
                    left: '-150%'
                }, 500);
            }
        });
    }, 5000);)
};​

上記のコードでは、ページが読み込まれるたびに、div要素が 5 秒ごとにスライドし続けます。divしかし、クリックすると、クリックされたボタンに応じて要素をそれぞれ左または右に移動するボタンが私のWebページにあります。しかし問題は、自動アニメーションとブウトンのクリック時に発生するアニメーションが時々重なることです。そのため、ボタンをクリックするたびに、自動アニメーションをdocument.ready5 秒遅らせる必要があります。

これは、このjsFiddleに示されています。「左アニメーション」または「右アニメーション」ボタンをクリックし続けると、div が重なることがあります。ボタンをクリックするたびに自動アニメーションを遅らせたいだけです。

4

1 に答える 1

6

を呼び出しclearInterval(refreshId)てから、コードを再実行してローテーションを設定できます。

これを行う方法の大まかなスケッチを次に示します。これ以上の詳細はお伝えできないかと思いますが、参考になれば幸いです！

$(document).ready(function () {
    var refreshId;
    function startRotation() {
        refreshId = setInterval(function () { /* rotate stuff */ }, 5000);
    }
    function restartRotation() {
        clearInterval(refreshId);
        startRotation();
    }
    startRotation();

    var button = /* find the buttons that should restart the rotation */;
    button.click(restartRotation);
};
于 2012-11-10T07:15:32.383 に答える