jQueryのアニメーションシーケンス

Question

私はリンクによってリンクでフェードことを、私は素敵なメニューを作りたいのウェブサイトに取り組んでいます。

以下のSeコード： #navigationのa.toplevelの最初のフェードイン、その後、最初の#navigation dtをし、次の、そして次のこれ以上存在しなくなるまでます。

あなたがフェードインの順序を作る方法を教えてください。

<div id="navigation">
        <a href="#" class="toplevel">Solutions</a>
        <dl> 
            <dt><a href="#">ERP</a></dt>             
            <dd> 
              <ul> 
                    <li><a href="#">About</a></li>                     
                    <li><a href="#">Something</a></li>                     
                    <li><a href="#">Something else</a></li> 
                </ul> 
            </dd>  
            <dt><a href="#">CRM</a></dt>             
            <dd> 
                <ul> 
                    <li><a href="#">About</a></li>                     
                    <li><a href="#">Something</a></li>                     
                    <li><a href="#">Something else</a></li> 
                </ul> 
            </dd> 
            <dt><a href="#">BI</a></dt>             
            <dd> 
                <ul> 
                    <li><a href="#">About</a></li>                     
                    <li><a href="#">Something</a></li>                     
                    <li><a href="#">Something else</a></li> 
                </ul> 
            </dd> 
        </dl> 
</div>

事前にありがとうございます。

Answer 1

あなたはこのようにもしかして？

の例：の http://jsfiddle.net/8gFLg/2/

$('#navigation > a, #navigation dt').each(function(idx) {
    $(this).delay( idx * 600 ).fadeIn( 600 );
});

Answer 2

あなたのフェードイン関数内だけで巣別のフェードインます。

 $('#navigation a.toplevel').fadeIn(function(){
      $('#nextthing').fadeIn(function(){
          $('#thenextthing').fadeIn();
      });
 });

<時間>

あなたが知っている必要がありますどのようにDTの？

をループします

Answer 3

おっと..ちょうど-綴らとやや面倒な解決策は、以下の提案と同等であることに気づいはるかに短くし、よりスマート1は、上記user113716によって提案 - アニメーション化する項目は便利正しい順序で配置されていること、しかし、条件にHTMLインチ

付属していない場合、あなたはまだ、このいずれかを使用することができます：

$(document).ready(function() {
     var time=0;
     var interval=500;
     $('#id1').delay(time).animate({top:100},interval);
     time=time+interval;
     $('#id2').delay(time).animate({top:100},interval);
     time=time+interval;
     interval=1000;
     $('#id3').delay(time).animate({top:100},interval);
     time=time+interval;
     $('#id4').delay(time).animate({top:100},interval);
     time=time+interval;
 })

ここでは、このコードに基づいてjavascriptのフィドルがある： http://jsfiddle.net/dj89d/する