jsFiddle - would something like this do?

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

以下是应该发生的事情：

使用简单的黑色背景加载页面
Div（.intro1）缓慢淡入，可能从顶部滑入并向下滑动
Div（.intro1）慢慢淡出，可能向下滑动，然后完全移除元素
Div（.intro2）缓慢淡入，可能从顶部滑入并向下滑动
Div（.intro2）慢慢淡出，可能向下滑动，然后完全移除元素
Div（.wrapper）慢慢淡入

这是我到目前为止所做的事情，我不确定接下来需要做什么。

以下是链接：http://jsfiddle.net/gVp7m/

Answer 1

试试这个：

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

Answer 2

以下是你如何做到这一点它看起来比实际更复杂

$(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 3

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

Fiddle

$(function() {

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

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

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

    });

});

}）;

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

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

4 个答案:

jsFiddle - would something like this do?