即时更改各个元素的背景颜色

Question

在CSS或JQuery中是否有一种方法可以动态更改li标签的背景,以便它们对每个元素稍微变亮,直到它变为白色？

例如,说我有一个包含10个li元素的列表.第一个将有一个红色(#ff0000)背景,下一个将是一个较浅的红色阴影,依此类推,直到我们到达最后一个背景为白色(#FFFFFF).

列表可以是任何长度,我只希望背景颜色从一种颜色,例如红色到另一种颜色,例如白色.我的网站使用jQuery,所以如果我必须使用它我不介意.

谢谢

Answer 1

假设您可以构建一个抓取<li>元素列表的选择器,这相对容易.

这样的事情(代码未经测试):

// get all <li>'s within <ul id="my-list">
var items = $('#my-list li');

// the increment between each color change
var step = (255.0 / items.size());

items.each(function(i, e) {
    var shade = i * step;
    $(this).css("background-color", "rgb(255," + shade + "," + shade + ")");
});