title: jquery delay fadein with loop
body: <p>I can't seem to get a <code>fadeIn()</code> <code>delay</code> to work. </p>
  
  <p>I've read loads about interval and it's not helping, also timeout but it's not currently helping. </p>
  
  <p>I'm calling the below function <code>onclick</code> and just want it to cycle with 3 seconds delay then if called again to start from <code>si-1</code> (first <code>div</code>) </p>
  
  <p>The function is looping but delay isn't in sync with the <code>setTimeout</code> call so after the first loop it starts skipping <code>div</code>s until it only show the last <code>div</code> and flickers.</p>
  
  <p>Any pointers?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>function runAnimation() {
      hiAni(); // hides all si- div's
      $('.si-1').delay(0).fadeIn();
      $('.si-2').delay(3000).fadeIn();
      $('.si-3').delay(6000).fadeIn();
      $('.si-4').delay(9000).fadeIn();
      $('.si-5').delay(12000).fadeIn();
      $('.si-6').delay(15000).fadeIn();
      $('.si-7').delay(18000).fadeIn();
  
      t = setTimeout(function(){runAnimation()},21000);
  }
  </code></pre>
  
  <p>It runs fine bar if you multi click! 
  <strong>Here is my js fiddle</strong> <a href="http://jsfiddle.net/FvNYy/4/" rel="nofollow">http://jsfiddle.net/FvNYy/4/</a></p>