1

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

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

对于它的价值，导航元素首先被隐藏，$('#nav li').hide();但我怀疑你已经猜到可能是这种情况。:)

怎样才能达到这样的效果？

4

3 回答 3

4 
$('#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.
});
于 2011-12-16T09:43:08.660 回答
0

检查这个小提琴：http: //jsfiddle.net/bPbw4/7/

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

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

然后你的串行动画的 JS 代码可以是这样的：

var currentLi = null;

var speed = 1000;
var gap = 500;

function doNext() {
    if(currentLi==null) {
        currentLi = $('ul li:first');
    }
    else if(currentLi.next().length!=0) {
        currentLi = currentLi.next();
    }
    setTimeout(function() {
        currentLi.fadeIn(speed, doNext);
    }, gap);
}

doNext();

在上面的代码中，speed是动画速度，gap是每个之间的延迟fadeIn()

于 2011-12-16T09:44:09.970 回答
0

我建议像这样的简单迭代

(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后迭代函数。timen+1

一个 JsFiddle 示例：http: //jsfiddle.net/McLZ4/3

于 2011-12-16T12:07:46.347 回答