循環遍歷導航欄的列表項，並使用jQuery的fadeIn（）動畫將它們淡入淡出

我想要做的是遍歷導航的列表項，並順序地淡入每個元素，但具有兩個延遲的靈活性選項：在繼續下一個動畫之前等待每個先前動畫完成的選項，和/或每個動畫開始之間的自定義延遲/超時（毫秒）（不是從一個動畫結束到開始下一個動畫）。循環遍歷導航欄的列表項，並使用jQuery的fadeIn（）動畫將它們淡入淡出

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

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

這種效果如何實現？

來源

2011-12-16 purefusion

你嘗試過什麼到目前爲止？ – Yoshi 2011-12-16 09:37:02

$('#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. 
});

來源

2011-12-16 09:43:08 Interrobang

+1雖然我不喜歡通過這種方式計算延遲的假鏈動畫，但這可能是一次實現兩個要求的最佳解決方案。 – Yoshi 2011-12-16 09:52:51

這是一種清潔解決方案！ – techfoobar 2011-12-16 09:53:28

檢查此琴：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()

來源

2011-12-16 09:44:09 techfoobar

之間的延遲，我建議一個簡單的迭代這樣

(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 th項上的fadein，然後在項上time毫秒後重復該函數。

一個的jsfiddle例如：http://jsfiddle.net/McLZ4/3

來源

2011-12-16 12:07:46 fcalderan

循環遍歷導航欄的列表項，並使用jQuery的fadeIn（）動畫將它們淡入淡出

回答

相關問題