jquery - テキストのフェードイン効果

Question

私はこのdivを持っています:

<div id="maintext">
        <div>
        <span>This is Photoshop's</span>
        <span>version  of Lorem</span>
        <span>Ipsum. Proin gravida</span>
        <span>nibh vel velit</span>
        <span>auctor aliquet. Aenean</span>
        <span>Psollicitudin, lorem quis</span>
        <span>bibendum auctor.</span>       
        </div>
    </div>

そして、私が望むのは、このスパンがフェードイン効果を得ることです。これどうやってするの？

Answer 1

すべての要素を一緒に表示する必要がある場合は、すべての要素にfadeInを適用する代わりに、単純に要素をfadeIn()非表示にして適用することができます#maintext > divspan

それ以外の場合は、シーケンシャル フェードインが必要な場合は、このデモをご覧ください: http://jsfiddle.net/FUZwL/

$('#maintext span').hide().each(function(i) {
    $(this).delay(i * 200).fadeIn(200);
});

Answer 2

$(function(){
   $('#maintext span').hide().fadeIn('slow');
});

または、css を使用してから jQueryspansを使用するように設定することもできます。display:none;fadeIn

#maintext span{
 display:none;
}

Answer 3

あなた<span>が表示されていない場合は、 jQuery を使用できます。

$("#maintext > div > span").fadeIn();

Answer 4

コールバックを使用するためにすべてのスパンをフェードインするには：

function fadein(obj){
 obj.fadeIn('normal', function(){ 
  var next = (obj).next(); if (next.length>0) fadein(next); 
 });
}
$("#maintext span:first");