淡入jQuery的順序鏈接？

我想弄清楚如何逐漸淡入我的鏈接。我可以把它們全部淡入，但我只想要一個人的美感。我甚至想讓他們一次一個地滑出來，但我明白這很難。至少對我來說寫作。這只是我的代碼處理導航的摘錄。淡入jQuery的順序鏈接？

$(document).read(function() { 
    $.each(['#href1', 
      '#href2', 
      '#href3', 
      '#href4', 
      '#href5'], function (i, l) { 

     $(l).fadeTo('slow', 1.0).delay(200); 

    }); 
});

來源

2013-04-26 WASasquatch

你也可以這樣做：

(function fadeLink($){ 
    $.eq(0).fadeTo("slow", 1, function(){ 
     ($=$.slice(1)).length && fadeLink($); 
    }); 
})($('ul > li'));

演示：jsFiddle

來源

2013-04-26 05:29:20

+1。我喜歡這個。 – nnnnnn 2013-04-26 05:33:16

這非常有效。我自己從來沒有得到那個簡短的代碼。大聲笑 – WASasquatch 2013-04-26 05:46:14

編程不是高爾夫比賽。這個解決方案是錯綜複雜的。 – 2013-04-26 05:47:06

的.delay()函數創建相同元件上的下一個動畫之前的延遲。儘量不使用setTimeout()：

$(document).ready(function() { // note: you had a typo "read" instead of "ready" 
    $.each(['#href1', 
      '#href2', 
      '#href3', 
      '#href4', 
      '#href5'], function (i, l) { 

     setTimeout(function(){ 
      $(l).fadeTo('slow', 1.0); 
     }, i * 500); 
    }); 
});

演示：http://jsfiddle.net/dpzPs/1/

請注意，如果你給你的ul一個id你可以這樣簡化您的JS：

$("#idOfUL li").each(...

...而不必到列出所有李元素的ID。

來源

2013-04-26 05:24:51 nnnnnn

我以爲我可以使用每一個，我嘗試了幾個版本，但認爲它不工作的方式。非常感謝！ – WASasquatch 2013-04-26 05:33:27

你的jsfiddle無法正常工作。檢查這一個：http://jsfiddle.net/dpzPs/2/ – Mysteryos 2013-04-26 05:39:46

我覺得''setInterval（）'比'setTimeout（）'好這種動畫。 [這是爲什麼]（http://stackoverflow.com/a/731625/704015）。 – 2013-04-26 05:42:23

這裏有一個簡單的解決方案。

var i = 0, // a counter 
    $ul = $('ul'), // save a reference to your ul 
    l = $('li', $ul).length, // count the list items 
    timer = setInterval(function(){ 
     if (i === l) clearInterval(timer); // Stop the timer if we've faded all elements in 
     $('li', $ul).eq(i).animate({opacity:1}, 160); 
     i++; // increment counter 
}, 200); // run the function in the setInterval once every 200ms

這是demo。

來源

2013-04-26 05:34:26

淡入jQuery的順序鏈接？

回答

相關問題