使用 jquery fadein 在页面加载时显示一系列链接

Question

我想使用 jQuery 在页面加载时淡入导航 div 内的链接。目前，它们使用 a 进行样式设置并具有单独的 ID。

#navtop a {etc.}

我是否必须将其更改为一个类，添加另一个隐藏链接的类，并在淡入淡出开始时重新应用该类，或者是否有更简单的方法？

我还希望链接一个接一个地淡入。

HTML：

<div id="navtop">
    <a id="link1" href="link.php"><img src="img/logotrans.gif" width="30" height="30" /></a>
    <a id="link2" href="link.php">News</a>
    <a id="link3" href="link.php">Blog</a>
    <a id="link4" href="link.php">Tour</a>
    <a id="link5" href="link.php">Photos</a>
    <a id="link6" href="link.php">About</a>
    <a id="link7" href="link.php">Contact</a>
 </div>

这是我对 JavaScript 的了解：

$(window).load(function() {
    $('#link1').fadeIn(5000, function() {
        // Animation complete
    });
});

Answer 1

您可以使用 jQuery 队列 对淡入进行排队。就像这样：

在 jsFiddle 上观看直播。

//--- Queue-up the fade-in's
var animationQ = $({});

$("#navtop a").each ( function () {
    var jThis = $(this);

    animationQ.queue ('FadeIns', function (nextQ_Item) {

        jThis.fadeIn (5000, function() {
            nextQ_Item ();
        } );
    } );
} );

//--- Start the fade-ins.
animationQ.dequeue ('FadeIns');

这种方法的优点是您只需更改选择器就可以对任何节点集合进行排队。他们不一定是兄弟姐妹。

---

更新：
要错开淡入中途的开始时间，请使用：

var fadeTime    = 5000; //-- How long will an individual fade last? (mS)
var fadeStagger = 500;  /*-- How far into i=one element's fade will 
                             the next elements fade start? (mS)
                        */

//--- Queue-up the fade-in's
var animationQ = $({});

$("#navtop a").each ( function (J) {
    var jThis = $(this);

    animationQ.queue ('FadeIns', function (nextQ_Item) {
        jThis.fadeTo (fadeStagger, fadeStagger / fadeTime , function() {
            nextQ_Item ();
            jThis.fadeTo (fadeTime - fadeStagger, 1);
        } );
    } );
} );

//--- Start the fade-ins.
animationQ.dequeue ('FadeIns');

在 jsFiddle 上查看。

---

要求解释：

1. 我们通过 jQuery 在空对象 ( $({}) ）上设置了一个通用队列容器。这看起来比将队列附加到某个节点更干净。

2. 我们使用任何有效的 jQuery 选择器选择节点，然后使用 each()< /code> functionDoc循环遍历它们。

3. 对于每个节点，我们使用 queue() 在自定义队列中添加一个条目 函数^文档。

   1. 我们为队列指定了一个唯一的名称“FadeIns”，以避免冲突。
   2. 每个队列条目在调用时都会将指针传递给下一个队列条目。我们使用 nextQ_Item 变量捕获该信息。
   3. 队列项目函数有 2 个任务：(1) 使项目淡入淡出，(2) 完成后调用下一个队列条目。
   4. 但是，我们已将 fade^Doc 分成 2 个零件来完成所需的交错启动。
      1. 第一次淡入淡出仅持续 fadeStagger 延迟时间。我们通过延迟时间与总时间的比率来计算最终的不透明度。
      2. 现在我们触发下一个元素。
      3. 接下来，我们恢复并完成淡入淡出，记住它只剩下（总 - 交错延迟）毫秒。
4. 构建自定义队列后，我们使用 dequeue() 函数将其关闭^文档。

Answer 2

无需更改任何标记。您想要的可以通过下面的代码轻松实现。实例： http://jsfiddle.net/tw16/pJ5uC/

$(window).load(function () {
    fadeA($('#navtop a:first-child'));
});

function fadeA(elem) {
    elem.fadeIn(500, function () {
        fadeA($(this).next());
    });
}

我使用了 500 而不是5000 加速观看过程。

Answer 3

这将使它们同时淡入。

$('#navtop a').fadeIn('slow', function() {
   // Animation complete
});

您将需要设置某种 setTimeout 并循环它们