Question

我正在我的网站上做“旅行”行动。如果有人，当他来到网站时没有做任何事情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 - 等待 - 滚动到#services - 等待 - 滚动到#contact

我应该怎么做？

Answer 1

我试图在这个小提琴中解决它：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);
}

Jquery滚动 - 等待 - 滚动

1 个答案: