JQuery以設定的間隔顯示每個元素

Question

我正在尋找一個JQuery代碼，它將首先顯示我的數組中的每個元素。然後我想在設定的時間間隔內用不同的顏色顯示每個數字。 因此，例如，首先顯示黑色文本1 2 3 4 5 6 7 8，然後用紅色顯示1，用紅色顯示1，用紅色顯示2，然後用紅色1和黑色3用黑色再用紅色2用黑色等等。

var obj1 = ["1", "2", "3", "4", "5", "6", "7", "8"]; 
var obj2 = { arrNum1: obj1 }; 

任何幫助appriciated。

Answer 1

嗯....我想我會做這樣的：

var objs = [ 
    obj1, obj2, obj3 obj4 ... 
]; 

我不太確定obj的是什麼，但我猜這是一個jQuery對象。

var index = 0; 
var prev_index = objs.length - 1; 
var seconds = 1000; 

var swap_color = function() { 

    objs[index].css('color', 'red'); 
    objs[prev_index].css('color', 'black'); 

    prev_index = index; 
    index++; 
    if(index >= objs.length) index = 0; 

    setTimeout(swap_color, seconds); 

} 

setTimeout(swap_color, seconds); 

這應該無限期地繼續。

Answer 2

到底什麼：

var arr = ["1", "2", "3", "4", "5", "6", "7", "8"]; 

$.each(arr, function(i,e) { 
    setTimeout(function() { 
     var elem = $('<span />', {text: e}), 
      time = (i*300)+(arr.length*300); 
     $('body').append(elem) 
     setTimeout(function() { 
      elem.css('color', 'red').prev('span').css('color', 'black'); 
     },time); 
    }, i*300); 
}); 

FIDDLE