在页面加载时，使用 jQuery 淡入淡出一个又一个 div

Question

我正在制作我的个人网站，我想做的是一个简单的动画。

代码如下：

<div class="wrapper">--- Main website body ---</div>
<div class="intro1">
    <div class="name1">John</div>
    <div class="name2">Doe</div>
</div>
<div class="intro2">
    <div class="prof1">Designer</div>
    <div class="prof2">Developer</div>
</div>​


<style>
    body {background: rgba(0,0,0,1); margin: 0px; padding: 0px; color: rgba(255,255,255,1); }
    .wrapper {width:100%; height:100%; max-height: 100%; background: rgba(0,0,0,1); display: none;}
    .intro1 {width: 500px; height: 150px; margin: 40% auto 0% auto; padding: 0px; display: none;}
    .intro2 {width: 500px; height: 150px; margin: 40% auto 0% auto; padding: 0px; display: none;}
</style>


$(function() {
    $('.intro1').fadeIn(1000).fadeOut(1000);
    $(function() {
        $('.intro2').fadeIn(1000).fadeOut(1000);
    });
});​

以下是应该发生的事情的细分：

1. 以简单的黑色背景加载页面
2. Div (.intro1) 慢慢淡入，可能从顶部滑入并向下滑动
3. Div (.intro1) 慢慢淡出，可能向下滑动，然后完全移除元素
4. Div (.intro2) 慢慢淡入，可能从顶部滑入并向下滑动
5. Div (.intro2) 慢慢淡出，可能向下滑动，然后完全移除元素
6. Div (.wrapper) 慢慢淡入

这是我目前所拥有的，我不确定接下来需要做什么。

这里是链接：http://jsfiddle.net/gVp7m/

Answer 1

试试这个：

$(function() {
    $('.intro1').fadeIn(1000).fadeOut(1000, function(){
       $('.intro2').fadeIn(1000).fadeOut(1000);
    });
});​

Answer 2

简单，第一个动画完成后使用回调函数触发下一个动画:)

Fiddle

$(function() {

$('.intro1').fadeIn(1000).fadeOut(1000, function() {

    $('.intro2').fadeIn(1000).fadeOut(1000, function() {

        $('.wrapper').fadeIn(1000);

    });

});

});

Answer 3

例如，您可以这样做。
它看起来比实际上更复杂

$(function() {
    function showIntro(nr){
        $('.intro'+nr).css({
            'margin-top':'20%',
            'display':'block',
            'opacity':0})
            .animate({
                'margin-top':'40%',
                'opacity':1},2000,function(){

                $(this).delay(1000).animate({
                    'margin-top':'60%',
                    'opacity':0},2000,function(){

                        $(this).remove();
                        if(nr==1){
                            showIntro(2);
                        }else if(nr==2){
                            $('.wrapper').fadeIn(2000);
                        }
                });          
        });
    };

    showIntro(1);
});​

演示：
http://jsfiddle.net/gVp7m/4/

Answer 4

这样的事情怎么样：

jsFiddle - would something like this do?

如果需要更多解释，请告诉我。为了便于阅读，我将其拆分为空格。

CSS

body {background: rgba(0,0,0,1); margin: 0px; padding: 0px; color: rgba(255,255,255,1); }
#Splash { position: fixed; top:0; left: 0; height: 100%; width: 100%; background: black; }
.wrapper {width:100%; height:100%; max-height: 100%; background: rgba(0,0,0,1); }
.intro1 {  }
.intro1 div { position: absolute; bottom: .5em; opacity: 0; }
.intro1 .name1 { left: .5em; }
.intro1 .name2 { right: .5em; }
.intro2 {  }
.intro2 div { position: absolute; opacity: 0; }
.intro2 .prof1 { left: 40%; }
.intro2 .prof2 { right: 40%; }

脚本

$(".intro1 div").animate({ opacity: 1 }, 2000);

$(".intro1 .name1").animate({
    left: "40%",
    top: ".5em"
}, 3000);
$(".intro1 .name2").animate({
    left: "60%",
    top: ".5em"
}, 3000);

$(".intro1 div").animate({ opacity: 0 }, 2000, function(e) {
    $(".intro2 div").animate({ opacity: 1 }, 2000);

    $(".intro2 .prof1").animate({
        left: ".5em",
        bottom: ".5em"
    }, 3000);
    $(".intro2 .prof2").animate({
        right: ".5em",
        bottom: ".5em"
    }, 3000);

    $(".intro2 div").animate({ opacity: 0 }, 2000, function(e) {
        $("#Splash div").hide();
        $("#Splash").fadeOut(3000);
    });
});