Javascript 在导航栏中循环'；s列出项目并使用jQuery'淡入淡入；s fadeIn（）动画

我想做的是遍历导航的列表项，并依次淡入每个元素，但具有两个延迟选项的灵活性：在继续下一个动画之前等待上一个动画完成的选项，和/或在每个动画开始之间的自定义延迟/超时（毫秒）（不是一个动画结束与下一个动画开始之间的延迟）

当然，我可以使用嵌套回调并专门调用每个列表项，但这在代码方面效率很低，而且只能一个接一个地加载每个元素，这在某些情况下是可以的，但在另一些情况下，我可能希望让它们几乎同时加载，可能会有一点延迟（来模拟我见过的一些基于Flash的导航）Hense为什么我说自定义延迟选项应该在一个开始和下一个开始之间

值得一提的是，导航元素首先是通过

$（“#nav li”）隐藏的。hide（）；

，但我怀疑您已经猜到了可能的情况。：）

这种效果是如何实现的？

检查这把小提琴：

$('#nav li').each(function(index, element) {
    $(element).delay(index*50).fadeIn(400); // delays each subsequent fade by 50ms.
    // Change 50 to match the duration of the fade and they will fade in one after the other.
});

假设您的导航HTML如下所示：

<ul>
    <li>Item-1</li>
    <li>Item-2</li>
    <li>Item-3</li>
</ul>

在上述代码中，

speed

是动画速度，

gap

是每个

fadeIn（）之间的延迟。

检查此小提琴：

假设您的导航HTML如下所示：

<ul>
    <li>Item-1</li>
    <li>Item-2</li>
    <li>Item-3</li>
</ul>

---

在上面的代码中，

speed

是动画速度，

gap

是每个

fadeIn（）之间的延迟。

我建议这样一个简单的迭代

(function(wait, speed) {

  var itm = $('#nav li'),
      len = itm.length,
      index = 0;

  (function sequentialFade() {
      $.when( itm.eq(index).fadeIn(speed) )
       .done(function() {
           if (index++ === len) return false;
           setTimeout(function() {
               sequentialFade()
           }, wait);
       })
  }());


}(1000, 200))

在本例中，我使用了延迟对象（jQuery 1.5+），但这种方法背后的思想是等待

n

th项上的fadein结束，然后在

n+1

th项上的

time

毫秒后迭代函数

---

一个JSFIDLE示例：

我建议这样一个简单的迭代

(function(wait, speed) {

  var itm = $('#nav li'),
      len = itm.length,
      index = 0;

  (function sequentialFade() {
      $.when( itm.eq(index).fadeIn(speed) )
       .done(function() {
           if (index++ === len) return false;
           setTimeout(function() {
               sequentialFade()
           }, wait);
       })
  }());


}(1000, 200))

在本例中，我使用了延迟对象（jQuery 1.5+），但这种方法背后的思想是等待

n

th项上的fadein结束，然后在

n+1

th项上的

time

毫秒后迭代函数

---

一个JSFIDLE示例：

到目前为止你试过什么吗？到目前为止你试过什么吗？+1虽然我不喜欢通过这种方式计算延迟来模拟链接动画，但这可能是同时实现这两个要求的最佳解决方案。这是一种更干净的解决方案！@Yoshi:如果你在做异步操作，这只是模拟链接s:P对于类似动画的东西，您只是在排队等待延迟“动画”作为Fx队列的一部分，完全同步。@Interrobang我不喜欢它的原因是，如果你在一台速度稍慢的机器上有很多繁重的动画，你会发现计算的延迟方法会变得异步。而正确链接的动画则不会。我知道这更符合理论，但你的第一位客户抱怨说宁宁会教你不要这样做。@Yoshi够公平的！为信息干杯。+1虽然我不喜欢通过这种方式计算延迟的假链接动画，但这可能是同时实现这两个需求的最佳解决方案。这是一种更干净的解决方案@Yoshi:如果你在做一些异步的事情，这只是假链接：P对于动画之类的东西，你只是将延迟“动画”作为Fx队列的一部分，完全同步。@Interrobang我不喜欢它的原因，这是因为如果你在一台速度稍慢的机器上有很多繁重的动画，你会发现计算的延迟方法会变得异步。而正确链接的动画则不会。我知道这更符合理论，但你的第一个客户对此抱怨，会教你不要这样做@好公平！为这些信息干杯。在大多数情况下，我希望他们比一个接一个地表现得更快，因此没有选择以那种方式表现是交易破坏者。在大多数情况下，我希望他们比一个接一个地表现得更快，因此没有选择以那种方式表现是交易破坏者。