jquery - 页面加载时，使用 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);
    });
});​