Несколько независимых jquery tickers на одной странице

Question

Я намерен использовать эту концепцию простого кода в своем проекте, shown on jsfiddle here.

Этот тикер в порядке, но я намерен использовать кучу (это) тикеров на одной странице сразу, так как они будут автоматически генерироваться PHP.

На одной странице может быть 3 этих тикера одновременно, вплоть до 20, с различным содержанием, конечно.

Как я могу заставить их всех работать, «двигаясь» отлично, как первый, используя признак HTML?

пс: пауза на зависании добавленный будет таким плюсом, 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/