Change background colour of individual elements on the fly

Question

Is there a way in CSS or JQuery where I can dynamically change the background of li tags so they get slightly lighter for each element until it gets to white?

For example say I had a list of 10 li elements. The first would have a red (#ff0000) background, the next one would then be a lighter shade of red, and so on and so on until we got to the last one which would have a background of white (#FFFFFF).

The list can be any length and I just want the background colour to go from one colour e.g. red to another colour e.g. white. My site uses jQuery so if I have to use that I don't mind.

Thanks

Answer 1

This is relatively easy, assuming you can build a selector that grabs your list of <li> elements.

Something like this (code is untested):

// 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 + ")");
});

Answer 2

Though a bit more complicated than the other answers, this will give you a nice linear gradient from one color to another, and allow you to use their hexadecimal representation.

markup

<ul id="my-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

code

$(document).ready(function() {
    makeLovely($("#my-list li"), 0x00ff00, 0x0000ff);
});

// code modified from: http://www.herethere.net/~samson/php/color_gradient/color_gradient_generator.php.txt
function makeLovely(items, startColor, endColor) {
    var r0 = (startColor & 0xff0000) >> 16;
    var g0 = (startColor & 0x00ff00) >> 8;
    var b0 = (startColor & 0x0000ff);
    var r1 = (endColor & 0xff0000) >> 16;
    var g1 = (endColor & 0x00ff00) >> 8;
    var b1 = (endColor & 0x0000ff);
    var steps = items.length;

    items.each(function(index) {
        var r = interpolate(r0, r1, index, steps);
        var g = interpolate(g0, g1, index, steps);
        var b = interpolate(b0, b1, index, steps);
        var newColor = zeroFill(((((r << 8) | g) << 8) | b).toString(16), 6);

        // console.log(newColor);

        $(this).css('background-color', newColor);
    });
}

function interpolate(start, end, index, steps) {
    if(start < end) {
        return ((end - start) * (index / steps)) + start;
    }
    return ((start - end) * (1 - (index / steps))) + end;
}

// stolen outright from: http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript
function zeroFill(number, width) {
    width -= number.toString().length;
    if (width > 0) {
        return new Array(width + (/\./.test( number ) ? 2 : 1)).join('0') + number;
    }
    return number;
}

Of course this could be wrapped up in a jQuery plugin if you prefer.

Hope it helps!