Sequence of events in jquery
<p>I have been trying to get this to work for months without success. I can get the layers to fade in and out manually by using a separate button "input type='button' value='FadeOut' onclick='fade('Layer1', this)' " for each layer, but getting this to run automatically in sequence had eluded me.</p>

<p>I have six layers, 0-5, that I want to fade in and out in sequence. I then want two functions to run. I want the length of time a layer is visible, approximately one second, to be adjustable. Can someone please help me?</p>

<p>When my page opens, I want "layer0" to be displayed.
onLoad I  want "layer1" to fade in and then out.
Next I want "layer2" to fade in and then out.
Next I want "layer3" to fade in and then out.
Next I want "layer4" to fade in and then out.
Next I want "layer5" to fade in and then out.
Then I want "layer0 to fade out.
Finally I want "function1" and "function2" to run.</p>

<p>Here is the code I am now using:</p>

<p>CSS:</p>

<pre><code>.initial-splash {  
    position:absolute;  
    left:10px;  
    top:105px;  
    width:610px;  
    height:335px;  
    z-index: 10;  
 }  
.splash {  
    font-family: Georgia, Times New Roman, Times, serif;  
    font-size: 36px;  
    font-weight: bolder;  
    color: #FCC836;  
    height: 49px;  
    line-height: normal;  
    z-index: 12;  
 }  
.splash {  
    display: none;  
}  
</code></pre>

<p>HTML:</p>

<pre><code>//&lt;![CDATA[ 
$(window).load(function(){
    var delay = 500, speed = 600;
    var layers = $('.splash').length;

    $('.splash').each(function (i) {
        var me = $(this);
        setTimeout(function () {
            me.fadeIn(speed).delay(delay).fadeOut(speed, function () {
                if (i == layers - 1) {
                    $('.initial-splash').fadeOut(speed, animationComplete);
                }
            });
        }, i * (delay + speed * 2));
    });

    function animationComplete() {  
        fade(),hideLayerNext();  
    }  
});  
//]]&gt;  


&lt;div class="initial-splash"&gt;&lt;img src="images/Site/625x340sunrise.jpg" alt="sunrise" width="625" height="340" border="1"&gt;&lt;/div&gt;  

&lt;div class="splash" style="position: absolute; top: 390px; left: 32px; width: 266px; "&gt;Friendship /div&gt;  

&lt;div class="splash" style="position: absolute; top: 324px; left: 147px; width: 236px; "&gt;Fellowship /div&gt;  

&lt;div class="splash" style="position: absolute; top: 256px; left: 265px; width: 189px; "&gt;Recovery /div&gt;  

&lt;div class="splash" style="position: absolute; top: 188px; left: 361px; width: 136px; "&gt;Sanity /div&gt;  

&lt;div class="splash" style="position: absolute; top: 130px; left: 500px; width: 133px; "&gt;Hope /div&gt;   
</code></pre>
