2

私は自分の個人的な Web サイトの一部に取り組んでおり、やりたいことは単純なアニメーションです。

コードは次のとおりです。

<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/

4

4 に答える 4

1

これを試して：

$(function() {
    $('.intro1').fadeIn(1000).fadeOut(1000, function(){
       $('.intro2').fadeIn(1000).fadeOut(1000);
    });
});​
于 2012-11-08T21:50:42.487 に答える
0

このようなものはどうですか：

jsFiddle-このようなことはできますか？

さらに説明が必要な場合は、お知らせください。読みやすくするためにスペースに分割しました。

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);
    });
});
于 2012-11-08T22:17:14.410 に答える
0

たとえば、次のようにします。
実際よりも複雑に見える

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

于 2012-11-08T21:56:48.250 に答える
0

簡単です。コールバック関数を使用して、最初のアニメーションが完了した後に次のアニメーションをトリガーします:)

フィドル

$(function() {

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

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

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

    });

});

});

于 2012-11-08T22:04:19.393 に答える