jQuery looping a function fails
<p>I have a little problem with jQuery.
I try to show multiple texts in a div. these divs shoud fadein and fadeout and in the end the function should restart.</p>

<p>i wrote a simple example and when it runs. it starts fine...</p>

<ol>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ol>

<p>when the function is looped the problem beginns. it shows the following order:</p>

<ol>
<li>two</li>
<li>four</li>
<li>five</li>
<li>six
and starts then over with this order.</li>
</ol>

<p>i don't get it. Can anybody point me in the right direction?</p>

<p>thats the script:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="jquery151.js"&gt;&lt;/script&gt;


    &lt;script type="text/javascript"&gt;
$(document).ready(function() {
    function loop() {

    var fadeTime = 1000;
    var delayTime = 3200;       

    //if($('#layout4TextTitel').is(':visible') ) {
    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('one');
    });
    $('#layout4TextTitel').fadeIn(1000).delay(delayTime);


    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').html('two').fadeIn(1000).delay(delayTime);
    }); 

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('three');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('four');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('five');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('six');
    });
    $('layout4TextTitel').fadeIn(fadeTime).delay(delayTime);                                                    
     // Ende for-Schleife       

    } // Ende loop()

    for(var x = 0; x &lt;=1000; x++) {
        loop();
    } // Ende for-Schleife

    });

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="layout4TextTitel"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>
