在页面加载时，使用jQuery逐格淡入和淡出

Question

I am working on a piece of my personal website and what I want to do is a simple animation.

Here is the code:

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

Here is the break down of what should happen:

1. Page loads with simple black background
2. Div (.intro1) slowly fades in with possible sliding in from the top and going downwards
3. Div (.intro1) slowly fades out with possible sliding out downwards followed by removing the element completely
4. Div (.intro2) slowly fades in with possible sliding in from the top and going downwards
5. Div (.intro2) slowly fades out with possible sliding out downwards followed by removing the element completely
6. Div (.wrapper) slowly fades in

This is what I have so far and I am nor sure what I need to do next.

Here is the link: http://jsfiddle.net/gVp7m/

Answer 1

Try this:

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

Answer 2

Here's how you could do it for example.
It looks more complex than it actually is

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

Demo:
http://jsfiddle.net/gVp7m/4/

Answer 3

Simple, use the callback function to trigger the next animation after the first one completes :)

Fiddle

$(function() {

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

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

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

    });

});

});

Answer 4

How about something like this:

jsFiddle - would something like this do?

If it needs more explination just let me know. I broke it into spaces to make it easier to read.

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

Script

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