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.slideDown，但没有得到预期的结果。然后我尝试了.animate，但是按钮一下子就一动不动地推迟了。

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

这是我用animate试过的：www.specter.uv.ro/index2.html

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

我不知道在哪里放延迟。

我是jQuery的新手。

请帮助！

Answer 1

尝试这样的事情。这是一个live demo

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

Answer 2

SlideDown提供了一个在当前动画结束时运行的回调方法。如果您的延迟与动画的长度相同，您可以尝试这样的事情（假设它们从一开始就是隐藏的）：

$(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是每个之间的延迟。

jquery多个按钮移动，每个按钮都有延迟

2 个答案: