3

我想在页面加载时使用 jQuery 淡入导航 div 内的链接。目前，它们使用 an 样式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
    });
});
4

3 回答 3

3

您可以使用jQuery queue将淡入队列排队。像这样：

在 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-ing 设置了一个通用队列容器。这似乎比将队列附加到某个节点更干净。

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

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

    1. 我们给队列一个唯一的名称“FadeIns”以避免冲突。
    2. 每个队列条目将在调用时传递一个指向下一个队列条目的指针。我们用nextQ_Item变量来捕捉它。
    3. 队列项函数有 2 个工作：(1) 使项淡入淡出，(2) 完成后调用下一个队列条目。
    4. 然而，我们已经将淡入淡出的文档分成两部分来完成所需的交错开始。
      1. 第一次淡入淡出仅持续fadeStagger延迟时间。我们通过延迟时间与总时间的比率来计算结束不透明度。
      2. 现在我们触发下一个元素。
      3. 接下来，我们恢复并完成淡入淡出，记住它只剩下 (total - stagger-delay) 毫秒。
  4. 构建自定义队列后，我们使用Doc函数将其启动dequeue()。
于 2011-08-14T11:04:54.573 回答
1

无需更改任何标记。使用下面的代码可以轻松实现您想要的。现场示例：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 来加快查看过程。

于 2011-08-14T10:58:55.183 回答
0

这将使它们同时淡入淡出。

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

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

于 2011-08-14T10:22:24.223 回答