Question

作为我网站上的介绍性动画的一部分，我试图按顺序显示导航按钮。

由于动画应该如下：

主要图片#lines_home淡入
标题#header淡入
导航按钮.nav_button按顺序逐个显示。 .nav_button类有4个元素。

最初隐藏所有元素，并在点击.nav_sub时显示.nav_button div。

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

我可以想到两种方法来做到这一点。关于哪一个更干净，我很难受。

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

两者都未经过测试。

Answer 2

这可以通过递归函数调用来处理任何（小）数量的按钮：

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

这基本上是你的原始代码，但程序化程度不同，而且，恕我直言，比预测每个fadein的起点和设置多个超时更好的方法。

延迟可以调低至零或根据需要增加。

请参阅fiddle

按类名创建元素数组，并在文档就绪时按顺序显示这些元素

2 个答案: