Создайте массив элементов по имени класса и последовательно покажите эти элементы на готовом документе

Question

Как часть вводной анимации на моем сайте, я пытаюсь последовательно отображать навигационные кнопки.

Как анимация должна идти следующим образом:

1. Основное изображение #lines_home выцветает
2. Заголовок #header выцветает
3. кнопки навигации .nav_button шоу быстро один за другим последовательно. Есть 4 элемента с классом .nav_button.

Все элементы изначально скрыты, а деления .nav_sub отображаются при нажатии на кнопку .nav_button.

DOM-(нав раздел только):

<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, и, ИМХО, лучший подход, чем предсказывают, начальные точки для каждого fadein и установки нескольких тайм-аутов.

Задержка может быть отрегулирована до нуля или увеличена по желанию.

См fiddle

Answer 2

Два способа я могу придумать для этого. Я разорван, какой из них чище.

1) с задержками

$(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) С обратных вызовов

$(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); 
}); 

Ни тестируются.