JavaScript jQuery同時循環通過div

Question

我想讓這個while循環通過一堆數字div與類數字1到4一個接一個地循環。它會出現錯誤。謝謝你的幫助！

var div = 1; 
while (div < 5){ 
    $("." + div).fadeIn().delay(4000).fadeOut(function(){ 
     div++; 
    }); 
} 

Answer 1

您可以延遲淡入（）遞增：

HTML：

<div class="fade" style="display:none">Div 1</div> 
<div class="fade" style="display:none">Div 2</div> 
<div class="fade" style="display:none">Div 3</div> 
<div class="fade" style="display:none">Div 4</div> 

的JavaScript：

$(".fade").each(function(i){ 
    $(this).delay(4000 * i).fadeIn().delay(4000).fadeOut(); 
}); 

演示：http://jsfiddle.net/bN28x/2/

Answer 2

增量div的fadeOut功能之外。

另請參見this post瞭解CSS類名稱的外觀，從數字開始不是其中之一。

我會考慮使用單個類名稱的div你想要應用這也太多，而不是明確引用每個div。

編輯在這種情況下，我會創建一個與其他東西分開的div集合。將其傳遞給對該列表中第一個項目執行操作的函數。在fadeOut函數中，再次調用相同的函數，傳遞列表的其餘部分。沒有更多元素時，不要調用函數來終止。基本上這是遞歸的。

同樣的事情可以迭代完成，我只是認爲遞歸版本更直觀。

Answer 3

您不能有一個以數字開頭的DIV類。它應該是別的東西。

如果你想所有div的，與特定的類名開始，你可以利用這一點，但會用它的在同一時刻：

$("[class^=fader]").fadeIn().delay(4000).fadeOut(); 

如果你想後海誓山盟做到這一點。試試這個：

$("[class^=fader]").each(function(index){ 
    $(this).delay(index * 4000).fadeIn().delay(4000).fadeOut(); 
}); 

Answer 4

您遞增div內fadeOut回調fadeOut僅完成時將被執行，將其移動outsite。試試這個

var div = 1; 
while (div < 5){ 
    $("." + div).fadeIn().delay(4000).fadeOut(function(){ 

    }); 
    div++; 
} 

Answer 5

你div++不應該匿名函數內部調用，但除了你的函數調用，這樣

var div = 1; 
while (div < 5){ 
    $("." + div).fadeIn().delay(4000).fadeOut(); 
    div++; 
} 

Answer 6

設定您喜歡褪色一類的所有div。

<div class="fadeClass"> 

// Select your divs 
var divs = $("div#fadeClass"); 
// fade them all in/out 
divs.each(function(index, value) { 
    $(this).fadeIn().delay(4000).fadeOut(function(){}); 
} 

http://api.jquery.com/jQuery.each/

Answer 7

jQuery有一個叫做「each」的函數，可以派上用場。

這是一個活生生的例子在的jsfiddle： http://jsfiddle.net/XGSTP/

看來尼爾斯剛剛發佈了一個類似的答案，但我希望加入的jsfiddle幫助。

總之，我不會打擾使用編號的div，我不知道這是否是不錯的練習。通過div的循環使用「每個」：

var delayAmount = 1000; //amount of delay between each div. 
$("div.fade").each(function(index){ 
    $(this).show().delay(index * delayAmount).fadeOut(); 
});