一個接一個地改變不同跨度的顏色

Question

我有一些文字，我希望它以一種方式改變顏色，使得左字母首先改變顏色，然后改變下一個等等（如波浪）。 所以，我為每個字母分配了一個跨度（類span0，span1等）並嘗試使用以下代碼更改顏色：

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

代碼不起作用。 （我使用的是jQuery顏色插件）那么，我該如何實現這個效果呢？

Answer 1

這是經典的“在回調錯誤中使用循環變量” - 在調用回調時， 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 。

Answer 2

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

使用jQuery，延遲一段時間，然后為顏色開關設置動畫。 你有兩個問題 - 你正在同時解雇所有的動畫，正如Alnitak指出的那樣 - 你的i變量不在適當的范圍內

您還可以通過為它們提供所有span類並將上面代碼中的選擇器更改為以下.span0來刪除對.span0 ， .span1等的需要：

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