1

私は自分のウェブサイトで「旅行」アクションを行っています。人がウェブサイトに来て 3 秒間何もしなかった場合、旅行が始まります。

var stop_timeout = false; // function for page trip
        $(function() {
            $("#begin").mousemove(function() {
                clearTimeout(stop_timeout);
                stop_timeout = setTimeout(function() {
                    //alert("The mouse has stopped.");
                    scroll("#about");
                }, 3000);            
            });
        });

そして、私がやりたいことは、「about」セクションでマウスを動かさなかったときに、その人を次のセクションにドロップすることです。私は次のようなものを想像します：

待機 - #about までスクロール - 待機 - #services までスクロール - 待機 - #contact までスクロール

どうすればいいですか？

4

1 に答える 1

2

私はこのフィドルでそれを解決しようとしました: http://jsfiddle.net/LePhil/zgwn9/

travel() は自分自身を再帰的に呼び出します。さまざまな方法で解決できると確信していますが、この方法が私にとって最も明白でした。jQuery セレクターについては、.next() を使用して解決策を見つけることもできますが、わかりやすくするために配列を使用しました。お役に立てれば！

var timer,
elementsToScrollTo = ["#second", "#third", "#fourth"],
breaker = false;

$(document).on("click, mousemove", function() {
    stop();
});
$(document).ready(function() {
    travel(0);
});


function travel(i) {
    timer = setTimeout( function () {
        if ( breaker ) { return; }
        $('html, body').animate({
            scrollTop: $( elementsToScrollTo[i] ).offset().top
        }, 1000, function() {
            if ( i+1 >= elementsToScrollTo.length ) {
                stop();
            } else {
                travel(i+1);
            }
        });
    }, 1000);
}
function stop() {
    console.log("stopping");
    breaker = true;
    clearTimeout(timer);
}
于 2013-08-09T20:29:30.503 に答える