jquery中的事件序列

Question

几个月来我一直试图让它工作但没有成功。我可以通过对每个图层使用单独的按钮“input type='button' value='FadeOut' onclick='fade('Layer1', this)'”来手动淡入和淡出图层，但是要让它运行自动依次顺序躲过了我。

我有六层，0-5，我想按顺序淡入和淡出。然后我想要两个函数运行。我希望图层可见的时间长度（大约一秒）可以调整。有人可以帮我吗？

当我的页面打开时，我希望显示“layer0”。 onLoad 我希望“layer1”淡入然后淡出。 接下来我想让“layer2”淡入然后淡出。 接下来我想让“layer3”淡入然后淡出。 接下来我想让“layer4”淡入然后淡出。 接下来我想让“layer5”淡入然后淡出。 然后我想让“layer0 淡出。 最后我想让“function1”和“function2”运行。

这是我现在使用的代码：

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 始终位于其他淡入和淡出之下，直到结束。更新了我的代码和演示，使其以这种方式工作。

Answer 2

你应该在每次淡入淡出后使用回调：

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

Answer 3

这就是我想出的，使用回调。您可以指定淡入淡出延迟和每层显示的时间。

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();
            });
        });
    });

});

你可以看到它在工作here。