褪色最新消息股票行情

我期待獲得最有效的方式來產生最新的新聞股票。褪色最新消息股票行情

我有一個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

謝謝，效果很好 –

褪色最新消息股票行情

回答

相關問題