クラス名で要素の配列を作成し、それらの要素をドキュメントの準備ができたら順番に表示します

Question

私のサイトの紹介アニメーションの一部として、ナビゲーションボタンを連続して表示しようとしています。次のようにアニメーションとして

行くべき：

1. を主画像#lines_homeヘッダ#headerが
2. ナビゲーションボタン.nav_buttonフェードイン
3. フェードイン1つの順次速いものを示しています。 .nav_buttonクラスには4つの要素があります。

.nav_buttonがクリックされると、すべての要素が最初は非表示になり、.nav_sub個のdivが表示されます。

DOM（NAVセクションのみ）：

<div id="nav"> 
    <div id="create" class="nav_button"> 
     <span class="nav_text">CREATE</span> 
    </div> 
    <div id="create_sub" class="nav_sub"> 
     <ul class="nav_sub_text"> 
     <li id="architecture">Architectural Design</li> 
     <li id="web">Web Development</li> 
     <li id="lighter">Lighter Underground</li> 
     <li id="digital_art">Digital Art</li> 
     <li id="guitar">Guitar</li> 
     <li id="sculpture">Sculpture</li> 
     </ul> 
    </div> 
    <div id="capture" class="nav_button"> 
     <span class="nav_text">CAPTURE</span> 
    </div> 
    <div id="capture_sub" class="nav_sub"> 
     <ul class="nav_sub_text"> 
     <li id="seattle">Seattle 2012</li> 
     <li id="burningman">Burning Man 2011</li> 
     <li id="sanfrancisco">San Francisco 2011</li> 
     </ul> 
    </div> 
    <div id="blog" class="nav_button"> 
     <span class="nav_text">BLOG</span> 
    </div> 
    <div id="blog_sub" class="nav_sub" > 
     <ul class="nav_sub_text"> 
     <li>SL8</li> 
     </ul> 
    </div> 
    <div id="about" class="nav_button"> 
     <span class="nav_text">ABOUT</span> 
    </div> 
    <div id="about_sub" class="nav_sub" > 
     <ul class="nav_sub_text"> 
     <li id="bio">Biography</li> 
     <li id="resume">Resum&eacute;</li> 
     </ul> 
    </div> 
</div> 

スクリプトは：

$(document).ready(function() { 
    var button = document.getElementsByClass('.nav_button'); 
    var buttonArr = jQuery.makeArray(button); 
    $('#lines_home').fadeIn(500, function(){ 
    $('#header').delay(100).fadeIn(500, function(){ 
     $(buttonArr[0]).show('fast', function() { 
      $(buttonArr[1]).show('fast', function() { 
       $(buttonArr[2]).show('fast', function() { 
        $(buttonArr[3]).show('fast'); 
       }); 
      }); 
     }); 
    }); 
    }); 
}); 

しかし、これは動作するように表示されません。誰にも何か提案はありますか？

Answer 1

これは再帰関数で行うことができますいずれかのボタン（小）数を処理するために呼び出します。

$(function() { 
    var $buttons = $('.nav_button'); 
    function fadeInButton(n) { 
     if (n < $buttons.length) { 
      $buttons.eq(n).delay(250).show('fast', function() { 
       fadeInButton(n + 1); 
      }); 
     } 
    } 
    $('#lines_home').fadeIn(500, function(){ 
     $('#header').delay(100).fadeIn(500, function(){ 
      fadeInButton(0); 
     }); 
    }); 
} 

これは、本質的にあなたの元のコードですが、異なるproceduralised、とされ、私見、予測よりも良いアプローチ各フェードインの開始点と複数のタイムアウトを設定します。

遅延をゼロまで調整するか、または必要に応じて増加させることができます。

fiddle

Answer 2

これを行うには2つの方法があります。私はどちらがきれいであるかについては引き裂かれている。コールバック

$(function() { 
    var enterButtons = function() { 
    $('.nav_button').each(function(index) { 
     var waitFor = index * 500; 
     $(this).delay(waitFor).show(); 
    }); 
    }; 

    var enterHeader = function() { 
    $('#header').delay(100).fadeIn(500, enterButtons); 
    }; 

    $('#lines_home').fadeIn(500, enterHeader); 
}); 

どちらもテストされていると遅延

$(function() { 
    var $home = $('#lines_home'), 
     $header = $('#header'), 
     $buttons = $('.nav_button'); 

    $home.fadeIn(500); 
    $header.delay(600).fadeIn(500); 
    $buttons.each(function(index) { 
    var waitFor = (index * 500) + 1100; 
    $(this).delay(waitFor).show(); 
    }); 
}); 

2）で

1）。