title: Create an endless loop in Jquery
body: <p>The HTML structure is like this </p>
  
  <pre><code>&lt;ul class="innerfade"&gt;
     &lt;li style="position: absolute; z-index: 4; display: none;"&gt;some Text&lt;/li&gt;
     &lt;li style="position: absolute; z-index: 3; display: none;"&gt;bla bla bla&lt;/li&gt;
     &lt;li style="position: absolute; z-index: 2; display: none;"&gt;bla bla&lt;/li&gt;
     &lt;li style="position: absolute; z-index: 1; display: none;"&gt;some Text&lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>I wanna change the css of each <code>&lt;li&gt;</code> from <code>display:none</code> to <code>display:block</code> to <code>none</code> again after an interval. And this goes on in an endless loop. Can someone tell me how to acheive this in jquery. </p>
  
  <p>So far my Jquery look like this - </p>
  
  <pre><code>$('.innerfade li').each(function()
  {
    $(this).css('display', 'block');
    $(this).fadeOut('slow');
  });
  </code></pre>
  
  <p>I tested this on firebug console but it didn't work. And i didnt go ahead and add the setTimout function.</p>
  
  <p>Anyway any Help will be greatly appreciated!</p>
  
  <p>Edit: I have edited the code so i can explain better what i'm trying to acheive. Like you can see each li is one below the other. The li's contain pictures and some text in the same structure(which i have omitted from here to keep things simple). Hence i want only one li to display at a time and then fade out. N then the next li takes over n so on and so forth in an endless loop. And i want each li to stay alive for roughly 5 mins</p>