使用 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 queue 将淡入排队。像这样：

See it live at 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');

See it at jsFiddle.

---

要求解释：

1. 我们通过 jQuery-ing 对空对象 ($({})) 设置了一个通用队列容器。这似乎比将队列附加到某个节点更干净。

2. 我们使用任何有效的 jQuery 选择器选择我们的节点，然后使用 the each() function^Doc 循环它们。

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

   1. 我们为队列指定一个唯一名称“FadeIns”以避免冲突。
   2. 每个队列条目在调用时都会传递一个指向下一个队列条目的指针。我们使用 nextQ_Item 变量来捕获它。
   3. 队列项函数有 2 个工作：(1) 使项淡入淡出，(2) 完成后调用下一个队列项。
   4. 但是，我们将fade^Doc 拆分为两部分以实现所需的交错启动。
      1. 第一次渐变仅持续fadeStagger 延迟时间。我们通过延迟时间与总时间的比率来计算结束不透明度。
      2. 现在我们触发下一个元素。
      3. 接下来，我们继续并完成淡入淡出，记住它只剩下 (total - stagger-delay) 毫秒。
4. 构建自定义队列后，我们会使用 the dequeue() function^Doc 启动它。

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 并循环它们