title: Infinite loop on list item in unordered list using jQuery
body: <p>I have this list of item</p>
  
  <pre><code>&lt;div id="lessonThree"&gt;
  &lt;a class="next" href="#"&gt;Next&lt;/a&gt;
  
   &lt;ul class="sponsors"&gt;
      &lt;li&gt;Chicago Community Trust&lt;/li&gt;
      &lt;li&gt;Chicago Instructional Technology Foundation&lt;/li&gt;
      &lt;li&gt;City of Chicago&lt;/li&gt;
      &lt;li&gt;Corporation for Public Broadcasting&lt;/li&gt;
      &lt;li&gt;U.S. Department of Energy&lt;/li&gt;
      &lt;li&gt;Ford Foundation&lt;/li&gt;
      &lt;li&gt;Google&lt;/li&gt;
      &lt;li&gt;Intel&lt;/li&gt;
      &lt;li&gt;Knight Foundation&lt;/li&gt;
      &lt;li&gt;MacArthur Foundation&lt;/li&gt;
      &lt;li&gt;National Endowment for the Arts&lt;/li&gt;
      &lt;li&gt;NESTA&lt;/li&gt;
      &lt;li&gt;The Nominet Trust&lt;/li&gt;
      &lt;li&gt;National Science Foundation&lt;/li&gt;
      &lt;li&gt;Ontario Trillium Foundation&lt;/li&gt;
      &lt;li&gt;Social Science Research Council&lt;/li&gt;
      &lt;li&gt;Alfred P. Sloan Foundation&lt;/li&gt;
      &lt;li&gt;Telefonica&lt;/li&gt;
      &lt;li&gt;ZeroDivide&lt;/li&gt;
    &lt;/ul&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>What I'm trying to achieve here is that I want to set a limit of how many item should be display at the time.</p>
  
  <pre><code>var MAX_ITEM = someNumbers // this will be define in the javascript file
  </code></pre>
  
  <p>So if say they have the maximum item to display at the time is : <code>3</code> what I really want is to let them <code>fadeIn</code> using jQuery one by one and when it reaches the MAX_ITEM I want that to have a delay of say <code>1500</code> millseconds using setTimeOut or something similar to display that for a bit then the three of the items will be <code>fadeOut</code> and starting the next three items and so on as an infinite loop.</p>
  
  <p>The <code>next</code> button is to be used to speed to the next item as if they want to make it move faster.</p>
  
  <p>I used to use this plugin <code>CarofredSel</code> but really that impact a lot of page load in our webapp, and it has a lot of restriction on the style which I can't really control.</p>
  
  <p>Can anyone suggest me a way or any example, so that I can accomplish this?</p>
  
  <p>This is the code I was starting with </p>
  
  <pre><code>$('ul &gt; li').each(function(i, element) {
      $(element).delay(i * 2000).fadeIn();
  });
  </code></pre>
  
  <p>But the above code will only loop through each of the list items and then will stop at the end.</p>
  
  <h2>Update:</h2>
  
  <p>I have did a bit more research "On Stackoverflow" There are a lot of good examples and this is one closest to what I want, but I can't accomplish what I want exactly.</p>
  
  <pre><code>var counter = 0;
  var limit = 3;
  
  function fadeInSequence(li){
      var next = $(li).next('li')!=null?function(){fadeInSequence($(li).next('li'));}:function(){};
      $(li).fadeIn(2000,next);
      counter++;
      if(counter == limit){
  
          counter = 0;
      }
  
  }
  fadeInSequence($('.sponsors&gt;li:first'));
  </code></pre>
  
  <p><a href="http://jsfiddle.net/zdqCz/84/" rel="nofollow">http://jsfiddle.net/zdqCz/84/</a></p>
  
  <p>The above code will <code>fadeIn</code> through all the items in the list, but not infinite and what I want now here is the same as the above where I want to only display 3 items then <code>fadeOut</code> and show the next 3.</p>