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

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，延迟越来越多的时间，然后为颜色切换设置动画。您有两个问题——您同时触发所有动画，正如 Alnitak 指出的那样——您的 i 变量不在正确的范围内

您还可以通过为它们提供一个 span 类并更改选择器来消除对 .span0、.span1 等的需求在上面的代码中:

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