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

以下是Fiddle上的相同代码，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>

以下 FIDDLE 与您的网站存在完全相同的问题

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

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

Answer 3

也许就是把它放在

 <script>

在body-element

中

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

3 个答案: