jQuery callback function issue
<p>I am a bit new to programming in jQuery/Javascript and am having some issues showing/hiding a series of headers in a div tag (container). The script code with attempted callback is:</p>

<pre><code>$(document).ready(function(){
    $('&lt;h1&gt;Text1&lt;/h1&gt;').hide().prependTo("#container").fadeIn(2000, function(){
        $("#container h1").fadeOut(2000, function(){
            $('&lt;h1&gt;Text2&lt;/h1&gt;').hide().prependTo("#container").fadeIn(2000, function(){
                $("#container h1").fadeOut(2000, function(){
                    $('&lt;h1&gt;Text3&lt;/h1&gt;').hide().prependTo("#container").fadeIn(2000, function(){
                        $("#container h1").fadeOut(2000, function(){
                            $('&lt;h1&gt;Text4&lt;/h1&gt;').hide().prependTo("#container").fadeIn(2000);
                        });
                    });
                });
            });
        });
    });
});
</code></pre>

<p>I basically want it to dislay Tesxt1 header with a fadein, then fadeout, then desplay text2 with a fadein and fadeout. Text4 is the last one and should only have a fadein without fadeout. Without the callback functions, everything is executed simultaneously and when they are added (incorrectly) above, later texts are prepended multiple times. </p>

<p>Thank you very much for your time.</p>
