Fade colors using jQuery

Retweetradar has nice little effect in the footer - links in top lists fade, emphasizing the most popular links with strongest color intensity. This tutorial will explain how to fade a color in array of elements using jQuery.

View demo 1

In the example in this tutorial we'll will fade links in unordered list like in the example below.

<ul id="links">
    <li><a href="#">Some text here</a></li>
    <li><a href="#">Some text here</a></li>
    ...
</ul>

Fade links using opacity property

In the first example, we will use opacity CSS property and apply different opacity to each link in unordered list. To do so we need two variables - the number of links and the number that will determine the step for decreasing the opacity. See in code that, for determing the step, we divide 90 with the number of links. This means that the last link will be 90% transparent. If we would divide 100 with the number of links, the last link will be completely transparent and thus invisible.

function fadeElements(color) {
    var count = $("ul#links li").size();
    var step = 90 / count;
    $("ul#links li").each(function(i) {
        var currentOpacity = 100 - (step * i);
        $(this).find("a").css("color", color)
            .css("opacity", currentOpacity = 100 ? "1" : "0." + parseInt(currentOpacity));
    });
}

Next, we determine opacity intensity for each link (currentOpacity) and assign it through CSS, together with chosen color (which is passed to the function by parameter). Note that I used inline "if" statement to assign opacity value of 1 if it is the first link, and less than one for all others.

$(document).ready(function() {
    fadeElements("#000");
}); 

You can then call fadeElements function and pass it the color you wish to fade. In the example above it's black.

Fade links using RGB values

View demo 2

If you don't want to use opacity for whatever reason, here's the complicated version - using RGB values. Let me explain the code below. The first four functions (that I found on the Web long time ago and reuse since then) convert Hex color values to red, green and blue values.

function HexToR(h) { return parseInt((cutHex(h)).substring(0, 2), 16) }
function HexToG(h) { return parseInt((cutHex(h)).substring(2, 4), 16) }
function HexToB(h) { return parseInt((cutHex(h)).substring(4, 6), 16) }
function cutHex(h) { return (h.charAt(0) == "#") ? h.substring(1, 7) : h }

Function fadeElements that you've seen earlier in this tutorial is now slightly complicated. Basically, it is doing the same job and that is fading colors. Only this time it won't make one color transparent but rathar scale original color and make several variations.

function fadeElements(color) {
    var count = $("ul#links li").size();
    var r = HexToR(color);
    var g = HexToG(color);
    var b = HexToB(color);
    var stepR = (230 - r) / count;
    var stepG = (230 - g) / count;
    var stepB = (230 - b) / count;
    $("ul#links li").each(function(i) {
        var valueR = parseInt(r + (stepR * i));
        var valueG = parseInt(g + (stepG * i));
        var valueB = parseInt(b + (stepB * i));
        $(this).find("a").css("color", "rgb(" + valueR + "," + valueG + "," + valueB + ")");
    });
}

The logic is similar to the first example. We also determine the number of links and number to decrease red, green and blue values for each link. Number 230 is 90% of 255 which is the highest value of a color in RGB model. Next, for each link we create color by decresing values of red, green and blue component of original color. It doesn't sound so complicated, isn't it?

Conclusion

This was just another demonstration of jQuery capabilities of its possible uses. The two examples are different although the output is similar. Which one would you use?