5

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

我有一个ul可以容纳任意数量的li's 和所有我需要循环通过它们淡入一个，保持 5 秒钟然后淡出，一次li一个。该列表以 40px 的li高度显示，它显示的井也是 40px，overflow: hidden从而产生所需的效果。li如果光标在显示时悬停在其上，也能够将其保持在原位，这将是构建它的好方法。

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

到目前为止我一直在使用这个：

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

    }

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

但它实际上并没有在下一个淡入淡出，li所以效果有点混乱。

如果有人可以提出一些替代方案来帮助产生我需要的效果，那将非常有用。

谢谢

4

2 回答 2

3

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

于 2012-11-09T14:40:06.353 回答
1

我会这样做：

function tickOut(){
    $('#ticker li:first').animate({'opacity':0}, 1000, function () { 
            $(this).appendTo($('#ticker')).css('opacity', 1); });
    }
var interval;
$(function() {
    interval = setInterval(function(){ tickOut () }, 5500);
    $('#ticker').hover(function() {
             if(interval)
                 clearInterval(interval);
             $('#ticker li:first').stop();   
             $('#ticker li:first').css('opacity', 1).stop();  
         }, function(){
             interval = setInterval(function(){ tickOut () }, 5500);
             });
});

查看$('#ticker').hover哪个清除间隔并停止动画并opacity在鼠标进入时返回 1 UL（当只有一些特殊元素在鼠标下方时，可能会更改为这样做LI）并在它离开后再次启动它UL。演示：http: //jsfiddle.net/KFyzq/6/

于 2012-11-09T14:50:02.517 回答