循環瀏覽導航欄的列表項並使用jQuery的fadeIn（）動畫淡化它們

Question

我想要做的是遍歷導航的列表項，並按順序淡化每個元素，但具有兩個延遲選項的靈活性：在繼續下一個動畫之前等待每個先前動畫完成的選項，和/或每個動畫開始之間的自定義延遲/超時（毫秒）（不是一個動畫結束和下一個動畫開始之間的延遲）。

當然，我可以使用嵌套回調並專門調用每個列表項，但這在代碼方面相當低效，並且只會一個接一個地加載每個元素，這在某些情況下是可以的，但在其他情況下我可能想要它們幾乎同時加載，可能有輕微的延遲（模擬我見過的一些基於Flash的導航）。 Hense為什么我說自定義延遲選項應該在一個開頭和下一個開始之間。

對於它的價值，導航元素首先通過$('#nav li').hide(); 但我懷疑你已經猜到了可能是這種情況。 :)

如何才能實現這種效果？

Answer 1

$('#nav li').each(function(index, element) {
    $(element).delay(index*50).fadeIn(400); // delays each subsequent fade by 50ms.
    // Change 50 to match the duration of the fade and they will fade in one after the other.
});

Answer 2

檢查這個小提琴： http ： //jsfiddle.net/bPbw4/7/

假設你的導航HTML看起來像：

<ul>
    <li>Item-1</li>
    <li>Item-2</li>
    <li>Item-3</li>
</ul>

然后你的串行動畫的JS代碼可以是這樣的：

var currentLi = null;

var speed = 1000;
var gap = 500;

function doNext() {
    if(currentLi==null) {
        currentLi = $('ul li:first');
    }
    else if(currentLi.next().length!=0) {
        currentLi = currentLi.next();
    }
    setTimeout(function() {
        currentLi.fadeIn(speed, doNext);
    }, gap);
}

doNext();

在上面的代碼中， speed是動畫速度， gap是每個fadeIn()之間的延遲

Answer 3

我建議像這樣簡單的迭代

(function(wait, speed) {

  var itm = $('#nav li'),
      len = itm.length,
      index = 0;

  (function sequentialFade() {
      $.when( itm.eq(index).fadeIn(speed) )
       .done(function() {
           if (index++ === len) return false;
           setTimeout(function() {
               sequentialFade()
           }, wait);
       })
  }());


}(1000, 200))

在這種情況下，我使用了延遲對象（jQuery 1.5+），但這種方法背后的想法是在第n個項目上等待fadein的結束，然后在第n+1個項目的time毫秒之后迭代該函數。

一個JsFiddle示例： http ： //jsfiddle.net/McLZ4/3