我可以連續使用循環淡入div嗎？

我有幾個div我想連續顯示。我想：我可以連續使用循環淡入div嗎？

var divs = ["#masterhead", ".links", ".code", ".projects", ".self"] 
var fade_time = 1000; 
var pause_time = 500; 
for(var i = 0; i <= divs.length; i = i + 1) 
{ 
    setTimeout(divs[i].fadeIn(fade_time) , 500) ; 
}

我想，因爲我想，而不是（工作的方式我想它）短代碼：

function A() 
    { 
     jQuery("#masterhead").fadeIn(fade_time); 
     setTimeout(B, 500); 
    } 
    function B(){ 
     jQuery(".links").fadeIn(fade_time); 
     setTimeout(C, 500); 
    } 

    function C(){ 
     jQuery(".code").fadeIn(fade_time); 
     setTimeout(D, 500); 
    } 
    function D(){ 
     jQuery(".projects").fadeIn(fade_time); 
     setTimeout(E, 500); 
    } 

    function E(){ 
     jQuery(".self").fadeIn(fade_time); 
    } 
    A();

那麼，究竟我做錯了在更短的代碼？

來源

2013-05-29 Mr_Spock

你意識到'divs [i]'只是一個字符串，而不是HTML元素或DOM節點？ –

我實際上認爲，但我是新的，真的不知道我會尋找什麼，以糾正這一點。 –

你可以展示一個（小的）[現場演示]（http://jsfiddle.net/），它重現你的問題/頁面？ –

這裏有一個簡單的方法來做到這一點不使用setTimeout()可言; jQuery的.delay() method就是爲了這個目的更加清晰：

for(var i = 0; i < divs.length; i = i + 1) 
{ 
    $(divs[i]).delay(pause_time * i).fadeIn(fade_time); 
}

演示：http://jsfiddle.net/sK99B/

四個問題與您的代碼：

divs[i]包含選擇作爲一個字符串，所以你需要使用$(divs[i])獲得一個jQuery對象，你可以調用.fadeIn()。
setTimeout()需要一個函數作爲它的第一個參數。您正試圖直接調用一個函數。你可以通過將它包裝在一個匿名函數中來解決這個問題。
setTimeout()不會暫停執行，它會排隊等待稍後運行的函數，因爲所有超時都設置爲500，它們將全部排隊等待（幾乎）同時運行。
您的for中的條件應該使用<而不是<=。

嘗試：

for(var i = 0; i < divs.length; i = i + 1) 
{ 
    (function(i){ 
     setTimeout(function() { $(divs[i]).fadeIn(fade_time); }, pause_time * i); 
    })(i); 
}

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

注意，如果傳遞給setTimeout()函數使用循環計數器i你有因爲功能不運行，直到問題循環結束後，他們都會嘗試使用最終值i - 因此您需要引入閉包，這使得此方法更加混亂。

來源

2013-05-29 20:27:10 nnnnnn

所有的答案都有效，但我很高興你解釋它。謝謝。 –

使用回調。

var divs = ["#masterhead", ".links", ".code", ".projects", ".self"] 
var fade_time = 1000; 
var pause_time = 500; 
var i = 0; 
function startDisplay() { 
    i = 0; 
    showNext(); 
} 
// just use this function as a callback, each time, to display the next 
function showNext() { 
    if (!divs[i]) { 
    // dernière div 
    return 
    } 

    setTimeout(function() { 
    // you can hide the previous one, for example 
    //$(divs[i-1]).hide(); 
    // take the current div, increment it 
    $(divs[i++]) 
     // fade it in, and use the current function as callback 
     .fadeIn(fade_time, showNext); 
    }, pause_time); 
}

來源

2013-05-29 20:26:00 Ven

試試這個 -

for(var i = 0; i <= divs.length; i = i + 1){ 
    setTimeout(function(){ 
     $(divs[i]).fadeIn(fade_time); 
    } , 500 + (i*pause_time)) ; 
}

來源

2013-05-29 20:26:23

這將立即調用'.fadeIn（）'，並將其返回值傳遞給'setTimeout（）'... – nnnnnn

我可以連續使用循環淡入div嗎？

回答

相關問題