Jquery event sequence

Question

I am trying to get this to work for several months without success. I can make the layers disappear and exit manually using a separate button "input type = 'button' value = 'FadeOut' onclick = 'fade (' Layer1 ', this)'" for each layer, but it automatically starts in the sequence slipped away from me.

I have six levels, 0-5, which I want to gradually push out and go out. Then I want two functions to be performed. I want the time to be visible, about one second, for adjustment. Can someone please help me?

When my page opens, I want to display "layer0". onLoad I want "layer1" to disappear and then exit. Then I want "layer2" to disappear and then exit. Then I want layer3 to disappear and then exit. Then I want layer4 to fade and then exit. Then I want layer5 to disappear and then exit. Then I want layer0 to disappear. Finally, I want the functions "function1" and "function2" to be executed.

Here is the code I'm using now:

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 .delay() , . setTimeout, :

// 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
}

. : http://jsfiddle.net/pMnwM/1/

: , , layer0 -out . .

Answer 2

:

$("#layer1").fadeOut(1000, function() {
    $("layer2").fadeOut(1000, function() {
       // deeper layers, you get the idea
    })
});

Answer 3

This is what I came up with using callbacks. You can specify the attenuation delay and display time of each layer.

function showHideLayer(id, speed, showFor, callback)
{
    $('#' + id).fadeIn(speed, function() {
        setTimeout(function() {
            $('#' + id).fadeOut(speed, callback);
        }, showFor);
    });
}

function yourFunction1()
{
    alert('Called Function 1');
}

function yourFunction2()
{
    alert('Called Function 2');
}

$(function() {

    $('#yourlayer1id, #yourlayer2id, #yourlayer3id').hide();

    showHideLayer('yourlayer1id', 2000, 2000, function() {
        showHideLayer('yourlayer2id', 2000, 2000, function() {
            showHideLayer('yourlayer3id', 2000, 2000, function() {
                yourFunction1();
                yourFunction2();
            });
        });
    });

});

You can see how it works here .