jquery - 根据延迟应用颜色

Question

我有一组 li，我想在每个 li 之间延迟后为每个 li 设置背景颜色。

例如：如果 1 li 被染成红色，那么经过一段时间的延迟（800）后，当前的有色 li 应该被移除，下一个 li 应该被着色，其余的应该继续。

HTML

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
  </ul>

jQuery

$('ul').each(function(i, j){
    $(this).eq(i).css('background-color', 'red').delay(1000).removeAttr('style');
});

演示

请纠正我，我哪里错了。

Answer 1

你可以做这样的事情。

var $li = $('ul li');

$li.each(function(i, li) {
    var that = $(this);

    setTimeout(function() {
        $li.removeAttr('style');

        that.css('background-color', 'red');
    }, i * 800);
});

JSFiddle

Answer 2

• ui当我认为您想遍历所有元素时，您正在遍历所有li元素
• 在迭代内部，$(this)将引用当前索引处的元素，因此无需使用 - 或者更确切地说，您不能eq(i)在此处使用 -。$(this).css(...)就足够了。
• .removeAttr不是动画。它不使用效果队列，因此不能以这种方式延迟。使用setTimeout.
• 在更正了以上所有内容后，您仍然必须注意迭代将非常快速地遍历所有元素。设置的超时应该以某种方式解决这个问题，例如。i*1000 或者您的超时应该递归调用自身并以这种方式推进循环，但这需要相当完整的重写。

例子：

function highlight(list, index) {
    list.removeAttr('style').eq(index%list.length).css('background-color', 'red');
    setTimeout(highlight, 1000, list, ++index);
}

演示

Answer 3

你可以试试这个http://jsfiddle.net/fpYdt/8/：

HTML：

<ul>
    <li class="red">list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

添加了 CSS：

.red {background-color:red}

查询：

$(document).ready(function () {
    setInterval(function(){
        var red = $('li.red');
        red.removeClass('red');
        var next = red.next();
        if(next.length > 0)            
            red.next().addClass('red');
        else
            $('li').first().addClass('red');
    },3000);
});