我正在制作一个我的个人网站,我想做的是一个简单的动画。
这是代码:
<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);
});
});
以下是应该发生的事情的细分:
- 页面加载简单的黑色背景
- Div (.intro1) 慢慢淡入,可能从顶部滑入并向下滑动
- Div (.intro1) 慢慢淡出,可能向下滑动,然后完全移除元素
- Div (.intro2) 慢慢淡入,可能从顶部滑入并向下滑动
- Div (.intro2) 慢慢淡出,可能向下滑动,然后完全移除元素
- Div (.wrapper) 慢慢淡入
这就是我到目前为止所拥有的,我不确定下一步我需要做什么。
这是链接:http: //jsfiddle.net/gVp7m/