褪色最新消息股票行情

我期待获得最有效的方式来产生最新的新闻股票。褪色最新消息股票行情

我有一个ul可容纳任意数量的li的，所有我需要通过他们的衰落之一，同时保持5秒钟，然后逐渐把它隐没，一个li循环。该列表显示为li高度为40px，并且其显示的井也是40px，其中overflow: hidden产生期望的效果。如果光标悬停在它上面，并且在显示它时很好地构建它，也能够保持li。

我知道有被广泛使用的jQuery自动收报器插件（ala旧的BBC风格），但我试过使用它，它看起来很笨重，因为我需要它的简单性，它会对我使用的样式造成严重破坏。

我一直在使用这个至今：

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

    } 

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

但它实际上并没有在接下来的li所以效果褪色是有点乱。

如果有人可以建议一些改变来帮助产生效果，我需要这样做会非常有用。

感谢

来源

2012-11-09 William Hand

你能提供fiddler.net的例子吗？ – LorDex

假设@LorDex谈论http://jsfiddle.net其实 –

http://jsfiddle.net/KFyzq/ - 在这里工作很好 –

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-09 14:40:06

你能告诉我使用实际的代码http://jsfiddle.net/9gQRP/ –

jsfiddle是为我玩的，增加了一个codepen。 –

它实现了褪色效果，但运行.hide（）从页面中删除了li，因此它不会循环:( –

我woudl那样做：

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内只有一些特殊元素是undefined时可能会改变r鼠标），并在其离开UL后再次启动它。演示：http://jsfiddle.net/KFyzq/6/

来源

2012-11-09 14:50:02

谢谢，效果很好 –

褪色最新消息股票行情

回答

相关问题