Question

我在信息屏幕上工作，显示通常很长的信息表，所以我希望它自动慢慢向下滚动，直到它到达底部，淡化为白色，向上滚动，然后淡入淡出从白色出来，经过一些延迟后重复整个过程。

目前我有这段代码：

var iInterval = 2000;
var iScrollInterval = 5000;
var iFadeInterval = 500;

var loop = function() {
    var iScroll = $(document).height() - $(window).height();
    $("html, body").animate({
        scrollTop: iScroll
    }, {
        duration : iScrollInterval, 
        easing : "linear", 
        complete : function() {
            $("body").fadeOut(iFadeInterval).delay(iFadeInterval);
            $("html, body").scrollTop(0);
            $("body").fadeIn(iFadeInterval);
        }
    });             
    setTimeout(loop, iInterval);
};
setTimeout(loop, iInterval);

该代码的问题是向下滚动到底部，立即再次跳到顶部，不会褪色并立即向下滚动。

此行为重复2-3次，直到最后，一旦第三次到达页面底部，就会发生淡入/淡出白色的情况。

毫无疑问，我在这里误解了一些东西，但又是什么？

Answer 1

我还没有使用过jQuery一段时间，但看了你的代码后有几件事情：

为什么要滚动HTML和BODY？
页面会重新启动，因为您没有在此处设置动画：

$（＆＃34; html，body＆＃34;）。scrollTop（0）;

还有其他问题。如果我有一分钟，我将用小提琴更新我的答案

<强>小提琴：

http://jsfiddle.net/64etqaxc/1/

var iInterval = 2000;
var iScrollInterval = 5000;
var iFadeInterval = 500;

var loop = function() {
    var iScroll = $(document).height() - $(window).height();
    $("html").animate({
        scrollTop: iScroll
    }, {
        duration : iScrollInterval, 
        easing : "linear", 
        complete : function() {
            $("body").fadeOut(iFadeInterval, function(){ 
                $("html").scrollTop(0);
                $("body").fadeIn(iFadeInterval,function(){ 
                    loop();
                });
            });            
        }
    });                    
};

loop();

自动滚动页面

1 个答案: