根据延迟应用颜色

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

你可以试试这个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}

JQuery:

$(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);
});

Answer 3

• 您正在对所有ui元素进行迭代，而我认为您希望对所有li元素进行迭代
• 在迭代中，$(this)将引用当前索引处的元素，因此不需要在此处使用-或者更确切地说，不能在此处使用-eq(i)。CCD_ 5就足够了
• .removeAttr不是动画。它不使用效果队列，因此不能以这种方式延迟。使用setTimeout
• 在纠正了以上所有内容之后，您仍然必须注意，迭代将非常快地循环通过所有元素。设置的超时应该以某种方式说明这一点，例如i*1000或您的超时应该递归地调用自己，并以这种方式推进循环，但这将需要相当完整的重写

示例：

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

演示