循环浏览导航栏的列表项并使用 jQuery 的 fadeIn() 动画淡入它们

发布于 2024-12-21 15:46:09 字数 373 浏览 2 评论 0原文

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

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

就其价值而言，导航元素首先通过 $('#nav li').hide(); 隐藏，但我怀疑您已经猜到可能是这种情况。：）

如何实现这种效果？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一场信仰旅途 2024-12-28 15:46:09

$('#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.
});

$('#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.
});

回复收藏 0 原文

自由范儿 2024-12-28 15:46:09

检查这个小提琴： 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之间的延迟()

Check this fiddle: http://jsfiddle.net/bPbw4/7/

Suppose your nav HTML looks like:

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

Then your JS code for the serial animation can be something like this:

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

In the above code, speed is the animation speed and gap is the delay between each fadeIn()

回复收藏 0 原文

合约呢 2024-12-28 15:46:09

我建议像这样的简单迭代

(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 个项目的淡入淡出结束，然后迭代在第 n+1 个项目的 time 毫秒后运行。

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

I suggest a simple iteration like this

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

In this case I used deferred objects (jQuery 1.5+), but the idea behind this approach is to wait the end of the fadein on the nth item and then iterate the function after time milliseconds on the n+1th item.

a JsFiddle example : http://jsfiddle.net/McLZ4/3

回复收藏 0 原文

~没有更多了~