javascript - 褪色最新新闻自动收报机

Question

我正在寻找最有效的方法来生成最新的新闻行情。

我有一个 ul 可以容纳任意数量的 li 并且我需要循环遍历它们淡出一个，保持 5 秒然后淡出，一次一个li。该列表以 40px 的 li 高度显示，它显示的井也是 40px，其中 overflow: hidden 产生了预期的效果。如果在显示时光标悬停在 li 上，则能够将其固定到位，这对于构建它来说非常好。

我知道有一个广泛使用的 jQuery ticker 插件(就像旧的 BBC 风格一样)，但我尝试使用它，但它看起来太笨重了，因为我需要它的简单性，而且它对我使用的样式造成了严重破坏。

到目前为止我一直在使用它:

function tickOut(){
        $('#ticker li:first').animate({'opacity':0}, 1000, function () { 
            $(this).appendTo($('#ticker')).css('opacity', 1); });

    }

    setInterval(function(){ tickOut () }, 5500);

但它实际上并没有在接下来的 li 中淡出，所以效果有点乱。

如果有人可以建议一些改变来帮助产生我需要的效果，那将非常有用。

谢谢

Answer 1

hide() 并在元素成为列表顶部后调用fadein()。

function tickOut(){
        $('#ticker li:first').animate({'opacity':0}, 1000, function () {
            $(this).appendTo($('#ticker'))
            $('#ticker li:first').hide()
            $('#ticker li:first').fadeIn(1000)
              $('#ticker li:not(:first)').css('opacity', '1')
        });
    }

setInterval(function(){ tickOut () }, 5500);

见:

http://codepen.io/anon/pen/lHdGb