JQuery endless fade loop colliding
<p>I was following a tutorial over at <a href="http://kaidez.com/javascript-for-loop-creates-jquery-fade/" rel="nofollow">http://kaidez.com/javascript-for-loop-creates-jquery-fade/</a> and was working through what another user posted about making the loop continuous.</p>

<p>I tried to make the sequence continuously loop, and for some reason I can't figure out why it works for 1.5 loops and then the items start fading in and out in an incorrect sequence.  It fades correctly through the first loop, and then the 4th item in the second loop fades in late, and then everything is off after that point.</p>

<p><strong>JQuery</strong></p>

<pre><code>(function($){

     var yourFade = 1, // the amount of time in seconds that the elements will fade in AND fade out
     yourDelay = 2, // the amount of time in seconds that there will be a delay between the fade ins and fade outs
     fadeTime = yourFade * 1000, //convert fade seconds to milliseconds (1000)
     delayTime = yourDelay * 1000, // convert delay seconds to milliseconds (2000)
     totalTime = fadeTime + delayTime, //3000 milliseconds...needed for all those delays we talked about
     allElems, // find out exactly how many page elements have the 'toBeFaded' class (4)
     elemNoFade, // Will help us find the last element represent the last element (3)
     i,
     fadingElem;
     allElems = $('.toBeFaded').length

    function fadeit(){
        for (i = 0, allElems = $('.toBeFaded').length, elemNoFade = allElems - 1; i &lt; allElems; i+=1) {

            fadingElem = "#elem" + i;           

            $(fadingElem).delay(totalTime * i).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
        }
    }
    fadeit();
    setInterval(fadeit,totalTime*allElems);


    })(jQuery); 
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.toBeFaded {
display: none;
position:absolute;
font-size:70px;
color:white;
}
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="elem0" class="toBeFaded"&gt;Message 1&lt;/div&gt;
&lt;div id="elem1" class="toBeFaded"&gt;Message 2&lt;/div&gt;
&lt;div id="elem2" class="toBeFaded"&gt;Message 3&lt;/div&gt;
&lt;div id="elem3" class="toBeFaded"&gt;Message 4&lt;/div&gt;
</code></pre>

<p>Thanks for the help!  I have been attempting to figure this out for hours now without luck.</p>
