Javascript 防止"；“跳跃”；在垂直自动滚动和循环垂直自动滚动中

我的垂直自动滚动似乎停止在某些点不稳定，我想有一个平滑的滚动代替。其次，我希望垂直滚动自动重置（几乎无限循环，或者暗示它永远不会结束，而不仅仅是跳跃）。我将如何着手实现这一点？这是我目前的代码：

HTML

<div id="wrapper">
<ul>
    <li><div id='activity_date'>06/11/2012</div></li>
    <li><div id='activity_date'>06/11/2012</div></li>
    <li><div id='activity_date'>06/11/2012</div></li>
    <li><div id='activity_date'>06/11/2012</div></li>
    <li><div id='activity_date'>06/11/2012</div></li>
    <li><div id='activity_date'>06/11/2012</div></li>
</ul>
</div>

JS

#activity_date {
    background-color: #cc0066;
    color: #FFF;
    width: 80px;
}
#wrapper {
    height: 240px;
    overflow: hidden;
}
#wrapper ul {
    position: relative;
    list-style-type: none;
}
#wrapper li {
    height: 30px;
    line-height: 12px;
    list-style-type: none;
}
​​

(function(){
    var i = 0;

    function Scroll() {
        i++;

        if (i < $('li').length) { // scroll down till we are at the last item
            $('ul').animate({top:'-=30'+'px'}, 1000);
        }
    }

    $(document).ready(function() {
        var timeOut;

        $('ul').hover(
            function(e) { // on hover in, stop the animation
                clearTimeout(timeOut);
            }, 
            function(e) { // on hover out, continue
                timeOut = setInterval(Scroll, 1000);
            }
        );

        timeOut = setInterval(Scroll, 1000); // start the animation at document load

    });

})();
​

（函数（）{
var i=0；
函数滚动（）{
i++；
如果（i<$（'li'）.length）{//向下滚动到最后一项
$（'ul'）.animate（{top:'-=30'+'px'}，1000）；
}
}
$（文档）.ready（函数（）{
var超时；
$（'ul'）。悬停(
函数（e）{//悬停时，停止动画
clearTimeout（超时）；
}, 
函数（e）{//悬停时，继续
超时=设置间隔（滚动，1000）；
}
);
timeOut=setInterval（滚动，1000）；//在加载文档时启动动画
});
})();
​

---

提前谢谢

动画的速度会自动变化。这称为“放松”，动画的两个标准选项是“摆动”和“线性”。Swing是默认设置，会导致先快后慢的外观。通过在动画中指定“线性”，可以解决此问题：

$('ul').animate({top:'-=30'+'px'}, 1000, 'linear');

无限循环要复杂得多。您需要做的是将所有内容放在一系列绝对定位的容器中，然后让每个容器向上设置动画，并设置一个检测功能，告知容器何时完全离开视野，然后继续将其设置到列表的末尾