異なるスパンの色が次々と変化する

Question

テキストがあり、左のアルファベットが最初に色を変え、次に次のように（波のように）色を変えたいと思います。だから、私は（クラスspan0、SPAN1などで）それぞれのアルファベットにスパンが割り当てられ、次のコードを使用して色を変えてみました：

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

コードは動作しません。 （そして私はjQueryのカラープラグインを使用しています） どうすれば効果を得ることができますか？

Answer 1

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

jQueryを使用すると、時間が長くなり、カラースイッチがアニメーション表示されます。オリオン座ゼータ星が指摘するようにあなたは、同時にすべてのアニメーションを発射している、と - - 次の2つの問題を持っているあなたのi変数が適切な範囲に

ではありませんそして、あなたはまた、.span1を.span0の必要性を削除することができますなどにそれらをすべてspanクラスを与え、上記のコードでセレクタを変更することで：

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

Answer 2

これは古典的な "コールバックバグの内部でループ変数を使用する" - コールバックが呼び出されるまでに、iの値は、コールバックが登録されたときの値ではなく最後の既知の値に設定されます。

これを試してみてください：@cwolvesあたり

// _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); 
} 

は答える - あなたはまた、そうでない場合、彼らはそれ故に一度にすべての火災、上記のコードで300 + 400 * iよタイムアウトをずらす必要があります。