CODEWITHSUNDEEP
jquery
beNerd
beNerd

Reputation: 3374

Looping each() loop infinitely

I am using jQuery to loop through each li element under a ul displaying them one by one. Here is the code:

  $('.article_ticker li:first').siblings().hide();
  var list=$('.article_ticker li:first').siblings();

  list.each(function(index)
  {
      $(this).siblings().hide().delay(2000).fadeOut();
      $(this).fadeIn('fast');
  });

This code works fine but once the 'each' loop ends, it doesn't repeat the sequence. I want to cycle to be repeated infinitely. Like after the last element fades out, first element should fade in.

Upvotes: 1

Views: 583

Answers (1)

Split Your Infinity
Split Your Infinity

Reputation: 4229

You can do the following...

$('.article_ticker li:first').siblings().hide();
var list=$('.article_ticker li:first').siblings();

(function repeatTicker() {
  list.each(function(index) {
    $(this).siblings().hide().delay(2000).fadeOut();
    $(this).fadeIn('fast');
  });
  setTimeout(repeatTicker, 10);
} ());

I'm using a setTimeout here otherwise the browser will complain that your page is not responding. Now I used 10ms, but I would increase it as much as possible.

Upvotes: 1

Related Questions