1

我有这个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

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

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

我不知道该把延迟放在哪里。

我是 jQuery 新手。

请帮忙！

4

2 回答 2

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);
于 2010-11-06T14:28:45.573 回答
1

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

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

于 2010-11-06T15:09:13.643 回答