jQuery多个按钮，每个按钮都有一个延迟

Question

我有这个HTML：

<div id="navbar">
  <ul>
    <li class="active"><a href="#">button1</a></li>
    <li class="inactive"><a href="#">button2</a></li>
    <li class="inactive"><a href="#">button3</a></li>
    <li class="inactive"><a href="#">button4</a></li>
    <li class="inactive"><a href="#">button5</a></li>
    <li class="inactive"><a href="#">button6</a></li>
    <li class="inactive"><a href="#">button7</a></li>
  </ul>
</div>
<div id="slider">
</div>

我想在页面加载时延迟对每个按钮进行移动效果。我已经尝试了jQuery.slidderown，但我没有得到预期的结果。然后我尝试了。但是，这些按钮立即移动，毫不延迟烤它们。

这就是我所得到的.slidedown： http://www.specter.uv.ro

这是我尝试使用动画的方法：www.specter.uv.ro/index2.html

var seq = $('li').show(), li = 0;
(function() {
  $(seq[li++]).animate({'margin-top':'20px'}, 300, arguments.callee);
})();

我不知道在哪里延迟。

我是新来的。

请帮忙！

Answer 1

当前动画完成后，SlideWown提供了一种回调方法。如果您的延迟与动画的长度相同，则可以尝试这样的事情（假设它们是从一开始就隐藏的）：

$(function() {
  $("#navbar li:first-child").slideDown(200, slideNext);
});
function slideNext() {
  $(this).next().slideDown(500, slideNext);
}

您也可以尝试此操作（这可能是您想要的）：

$(function() {
  $("#navbar li").each(function(ind) {
    setTimeout("$($('#navbar li')[" + ind + "]).slideDown(200);", ind * 100);
  });
});

这 100 在 ind * 100 是每个之间的延迟。

Answer 2

尝试这样的事情。这是一个 现场演示

$(function() {
    var delay = 0;
    var duration = 2000;
    $("#navbar li").hide().each(function() {
       $(this).delay(delay).slideDown(duration);
       delay += 1000; 
    });
});

如Zain的评论所建议的那样，您不希望每个按钮都有不同的延迟，则可以用以下方式替换上述大部分。

$(#navbar li").hide().delay(delay).slideDown(duration);