使用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，以加快觀看過程。