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变量不在适当的范围内

您还可以删除对.span0，.span1等的需求，方法是为所有span类提供，并将上述代码中的选择器更改为：

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

一个接一个地改变不同跨度的颜色

2 个答案: