jQuery，滑动垂直文本只是离开屏幕而不回圈

Question

到目前为止，我的代码如下：

  function richardsSuperAmazingVerticalTextScroller(){


        $('#honor-roll ul').animate(
        { 
            top: '-=' + $('#honor-roll ul li:last').height()
        },
        1000,
        'linear',
        function(){
            var offset = $('#honor-roll ul li:last').offset().top;                
            console.log(offset);
            if( offset <= 640){
                 $('#honor-roll ul li').css("margin", 0);
                 $('#honor-roll ul li:last').after($('#honor-roll ul li:first').detach());
            }
        }
    );
    }
    $(document).ready(function(){
        setInterval('richardsSuperAmazingVerticalTextScroller()',1000)
    });

在jsFiddle上它工作得很好，但是在这个版本中它失败了，http://barkins.com/test.html

下面是http://jsfiddle.net/qmFD3/6/上的相同代码

有人能发现问题所在吗？谢谢

Answer 1

所以，这不是相同的代码。特别是，您的jsFiddle具有

if( offset <= 640){
    $('#honor-roll ul').css("top", 0);
    $('#honor-roll ul li:last').after($('#honor-roll ul li:first').detach());
}

而你网站上的代码有

if( offset <= 640){
    $('#honor-roll ul li').css("margin", 0);
    $('#honor-roll ul li:last').after($('#honor-roll ul li:first').detach());
}

改变这一点可以解决这个问题。

顺便说一句，您不应该在setTimeout中使用字符串。您可以将其更改为：

setInterval(richardsSuperAmazingVerticalTextScroller,1000)

Answer 2

您需要更改：

$('#honor-roll ul li').css("top", 0);

至：

$('#honor-roll ul').css("top", 0); // Note the li

以及将所有jQuery代码包装在$(document).ready(function() { });中

$(document).ready(function(){
    $('#honor-roll ul').css({display:"none"});
    $('#honor-roll ul').fadeIn('slow');
    setInterval(richardsSuperAmazingVerticalTextScroller,1000)
});

编辑：

我想我知道你的代码不能工作的原因，那是因为你的jQuery版本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

下面是与您的站点具有完全相同问题的

所以你只需要在你的网站上使用另一个jQuery版本，它应该可以工作。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Answer 3

也许这一切都是为了把

 <script>

在body-element中