不斷改變不同跨度的顏色

我有一些文本，我希望它改變顏色的方式，使左側的字母先改變顏色，然後是下一個等等（如波）。所以，我分配每個字母表跨度（帶班span0，SPAN1等），並嘗試使用下面的代碼改變顏色：不斷改變不同跨度的顏色

for (var i = 0; i < spans.length; i++) { 
     window.setTimeout(function(){ 
      $(".span"+i).animate({'color':'orange'}, 400); 
    }, 300); 
};

的代碼不能正常工作。（我正在使用jQuery顏色插件）那麼，我該如何達到效果呢？

來源

2012-01-05 Jatin

你可以在JsBin [試試這個（http://jsbin.com/eguvaj/2）。 **順便**請記得接受答案，如果這個答案適合你！ – balexandre 2012-01-05 09:30:39

@balexandre我怎樣才能讓這個浪潮無限暢通？每當我試圖做到這一點，瀏覽器變得沒有反應。 – Jatin 2012-01-05 10:34:12

for(var i = 0; i < spans.length; i++){ 
    $('.span' + i).delay(300 + i*50).animate({'color':'orange'}, 400); 
}

使用jQuery，延遲時間越來越長，然後設置顏色開關的動畫。你有兩個問題 - 你射擊所有的動畫在同一時間，和參宿指出 - 你i變量是不是在適當範圍

而且你還可以刪除不需要.span0，.span1等給他們全部span類，並改變選擇在上面的代碼：

var $spans = $('.span') 
for(...){ 
    $spans.eq(i)...

來源

2012-01-05 08:50:08

使用'.delay（）'好的解決方案，因爲它是一個jQuery動畫效果，但未能解釋爲什麼原始效果不起作用。如果你+1我的話，我會給你+1 ;-) – Alnitak 2012-01-05 09:01:12

你確定這個新的最後一位？它會改變頁面上的每一個區域，而不管它們是否是OP想要改變的區域。 – Alnitak 2012-01-05 09:04:01

「點跨度」，所有與「班級跨度」，而不是所有的「跨度標籤」 - OP已經將一類「span＃」添加到一堆東西 – 2012-01-05 09:05:22

這是一個經典的「在回調錯誤中使用循環變量」 - 在回調被調用時，i的值被設置爲其最後已知值，而不是其在回調註冊時的值。

試試這個：

// _returns_ a new function that's bound to the specified selector 
function setcolor(sel) { 
    return function() { 
     $(sel).animate({'color', 'orange'}, 400); 
    } 
} 

// set the callback to the function returned above 
for (var i = 0; i < spans.length; ++i) { 
    window.setTimeout(setcolor('.spans' + i), 300 + 400 * i); 
}

每@cwolves回答 - 你還需要其他方式錯開超時他們都會火一次，因此在上面的代碼中300 + 400 * i。

來源

2012-01-05 08:47:29 Alnitak

+1指出變量範圍問題 – 2012-01-05 09:02:09

@Alnitak我試過你給的代碼，但即使它不起作用。 – Jatin 2012-01-05 09:07:10

@Jatin請定義「不起作用」。 – Alnitak 2012-01-05 09:08:32

不斷改變不同跨度的顏色

回答

相關問題