Search code examples
jquerysettimeoutinfinite-loopticker

creating a Javascript-based news ticker

I'm creating a ticker of sorts, and need it to be running until the page is obviously closed or navigated away from.

This script will just be cycling through li (this is what I've got so far):

$("li").hide(); //hides all "li" onload
var lis = $("ul").children("li").size(); //counts how many "li"s there are
var count = 0;
while(true)
{
    count++;
    if(count>lis) //checks if count needs to be reset
    count = 1;

    $("li:nth-child(" + count + ")").fadeIn('slow');
    setTimeout('', 4000);
}

Obviously the page won't load because of the the infinite loop. Does anyone have any suggestions about how I should go about this?

Solution 
  • var ticker = $('ul.ticker');
ticker.children(':first').show().siblings().hide();

setInterval(function() {
    ticker.find(':visible').fadeOut(function() {
        $(this).appendTo(ticker);
        ticker.children(':first').show();
    });
},2000);

    demo