Sequence of events in jquery

Question

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.

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?

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.

Here is the code I am now using:

CSS:

.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;  
}  

HTML:

//<![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();  
    }  
});  
//]]>  


<div class="initial-splash"><img src="images/Site/625x340sunrise.jpg" alt="sunrise" width="625" height="340" border="1"></div>  

<div class="splash" style="position: absolute; top: 390px; left: 32px; width: 266px; ">Friendship /div>  

<div class="splash" style="position: absolute; top: 324px; left: 147px; width: 236px; ">Fellowship /div>  

<div class="splash" style="position: absolute; top: 256px; left: 265px; width: 189px; ">Recovery /div>  

<div class="splash" style="position: absolute; top: 188px; left: 361px; width: 136px; ">Sanity /div>  

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

Answer 1

jQuery's .delay() will be helpful here, but it only works on a single element. However, we can combine it with some basic calculations and a setTimeout to make it work for any number of layers:

// These are adjustable
var delay = 1000, speed = 600;
var layers = $('.layer').length;

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

function animationComplete() {
    // Do whatever here
}

See the demo: http://jsfiddle.net/pMnwM/1/

Update: I realised that you actually want layer0 to always be underneath the other fade-ins and -outs until the end. Updated my code and demo to work that way.