在一個頁面上的幾個獨立的jquery tickers

Question

我打算在我的項目shown on jsfiddle here中使用這個簡單的股票代碼概念。

這個股票是好的，但我打算一次使用一堆（這個）tickers在一個頁面，因爲他們會自動生成的PHP。

在一個頁面上可以同時存在3個這樣的代碼，一直到20個，當然有不同的內容。

我怎樣才能讓他們工作，「移動」作爲第一個罰款，使用精選的HTML？

ps：暫停懸停加了會是這樣一個加號，thx！

JS

function tick(){ 
    $('#ticker li:first').slideUp(function() { $(this).appendTo($('#ticker')).slideDown(); }); 
} 
setInterval(function(){ tick() }, 5000); 

HTML

<div><ul class="ticker" id="ticker"> 
    <li> 
     One. 
    </li> 
    <li> 
     Two. 
    </li> 
    </ul></div> 

<div><ul class="ticker" id="ticker1"> 
    <li> 
     3. 
    </li> 
    <li> 
     4. 
    </li> 
    </ul></div> 

<div><ul class="ticker" id="ticker2"> 
    <li> 
     Five. 
    </li> 
    <li> 
     Six. 
    </li> 
    </ul></div> 

CSS

.ticker { 
    height: 40px; 
    overflow: hidden; 
    background:#c1c1c1; 
} 
.ticker li { 
    height: 40px; 
} 

Answer 1

你只針對第一li在集合中，整個集合。您需要循環播放每個代碼，然後在每個li:first上進行動畫。其追加到closest()股票，你是好：

function tick(){ 
    $('.ticker').each(function(){ 
     $(this).find('li:first').slideUp(function() { 
      $ticker = $(this).closest('.ticker'); 
      $(this).appendTo($ticker).slideDown(); 
     }); 
    }); 
} 
setInterval(tick, 5000); 

JSFiddle

Answer 2

我喜歡oGeez回答比我自己更好（這真的應該是一個評論，而不是編輯我的回答是這樣的，但我不目前還沒有評論的能力......）。

但是我會指出，當鼠標懸停在元素上時，您應該能夠添加功能來使用jquery hover（）方法將元素附加到正在蒙上陰影的元素上。 http://api.jquery.com/hover/從那裏您只需在您要更新的代碼列表中不包含代碼與暫停的課程。

function tick(){ 
    $('.ticker').not(".paused").each(function(){ 
     $(this).find('li:first').slideUp(function() { 
      $ticker = $(this).closest('.ticker'); 
      $(this).appendTo($ticker).slideDown(); 
     }); 
    }); 
} 
setInterval(tick, 5000); 

$(".ticker").hover(  
    (function() {   
     $(this).addClass("paused")  
    }),  
    (function() {   
     $(this).removeClass("paused")  
    }) 
); 

我更新了你的jsfiddle的分支，以反映oGeez的答案和通過鼠標懸停在代碼中暫停的能力。 http://jsfiddle.net/4MgZv/3/