使用jquery淡入淡出显示加载页面上的链接选择

Question

我想使用jQuery淡入页面加载时导航div内的链接。目前他们的风格是使用a并拥有个人身份证件。

#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在一个空对象（$({})）上设置了一个通用队列容器。这似乎比将队列附加到某个节点更清洁。

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. 接下来，我们恢复并完成淡入淡出，记住它只剩下（总 - 交错延迟）毫秒。
4. 一旦我们的定制队列建成后，我们与the dequeue() function^Doc火它关闭。

Answer 2

这将让他们在同一时间的所有淡入。

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

您将需要建立某种形式的setTimeout和环比他们

Answer 3

无需更改任何标记。使用下面的代码可以轻松实现您想要的内容。活生生的例子：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，以加快观看过程。