CSS3とjQueryを使って順番に要素をアニメ化する

Question

私はjQueryの初心者です（CSS3など）。3つの異なる要素（この場合イメージ）を自動的にアニメーション化して、ページがロードされるときに、シーケンス＃1、＃2、＃3内の他のもの。ここに私のCSSです：jQueryのために

img#element3 { 
    position:absolute; 
    opacity:0; 
    top:25px; 
} 

img#element2 { 
    position:absolute; 
    opacity:0; 
    top:270px; 
    left:60px; 
    margin:10px 0; 
} 

img#element1 { 
    position:absolute; 
    opacity:0; 
    top:328px; 
    left:70px; 
    margin:10px 0; 
} 

、私はthis postでソリューションを修正しようとしましたが、それは働いていません。ここでは、私はjQueryのためにやったことだ：

$(document).ready(handler) 
    $("#element3").animate({opacity: "1"}, "slow", function() { 
    $("#element2").animate({opacity: "1"}, "slow", function() { 
    $("element1").animate({opacity: "1"}, "slow", function() { 
    }); 
}); 
}); 

はちょうどCSS3アニメーションやトランジションを使用してこれを行う方法はありますか？そうでない場合は、jQueryを使用する適切な方法は何ですか。また、注文や遅延を指定するにはどうすればよいですか？

Answer 1

CSSだけでステージングされたアニメーションを実行できませんでした。

コードには多くの構文上の問題があります。エラーコンソールを参照するか、JSLintなどのツールを使用してください。

私はおそらく...

$(document).ready(function() { 
    $("#element3").fadeIn('slow', function() { 
     $("#element2").fadeIn('slow', function() { 
      $("#element1").fadeIn('slow'); 
     }); 
    }); 
}); 

jsFiddleを使用すると思います。

Answer 2

少しクリーナーあなたは.each()で、クラス、または複数のセレクタを使用している場合：

$(document).ready(function() { 
    $("#element3,#element2,#element1").each(function(i) { 
     $(this).delay(600*i).animate({opacity: "1"}, "slow"); 
    }); 
}); 

...または順序が逆転している場合：

$(document).ready(function() { 
    $($("#element3,#element2,#element1").get().reverse()).each(function(i) { 
     $(this).delay(600*i).animate({opacity: "1"}, "slow"); 
    }); 
}); 

Answer 3

これは、CSS3で完全に可能ですアニメーションは、マークされた答えとは異なります。

彼のソリューションを構築するには、次のアニメーションを1つずつ発射する

使用keyframesとanimation-delayを。

@keyframes 'fadein' { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

直前要素animation-duration値の和に等しくなるように各要素に対してanimation-delayを高めます。

もちろん、modernizrにjsフォールバックを使用してください！

here'sウェブキット用の完全なソリューション。必要に応じて他のブラウザのプレフィックスを適用します。