Fade colors using jQuery

October 13, 2009

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?

Let's discuss this on twitter.

20 Comments

  • Kim H (October 14, 2009)

    Lovely; it’s amazing the capabilities of jQuery. Only problem is browsers without JS enabled, but these two methods seem to work around that fine.

  • webmasterdubai (October 14, 2009)

    really nice work and nice jquery plugin, again really nice work.

  • Girlie | Digital Room (October 14, 2009)

    Great tutorial! jQuery’s capabilities really amaze me. Thanks for sharing this!

  • Steffen Jørgensen (October 14, 2009)

    Gotta love jQuery!

  • partouf (October 14, 2009)

    Am I going out of my mind, or does the opacity version of this just look aweful? (FF3.5.3)
    That and ofc it doesn’t work IE8, but that doesn’t matter much.

    I really like the RGB version though.

  • Oes Tsetnoc (October 14, 2009)

    This is a nice script! I will experiment on this. TY for the recommendation.

  • Janko (October 14, 2009)

    Thanks everyone for the comments!

    partouf: it works for me in FF 3.5.3. RGB version should be cross-browser compatible anyway.

  • Bill @ Edward Rayne (October 14, 2009)

    Nice script. I’m always amazed at how simple and powerful jQuery is. On compatability my IE7 is displaying both correctly. No surprise for the RGB version but I’m surprised the opacity version works. I didn’t think IE7 supported opacity and have been using filter: alpha(opacity=XX).

    Anyhow great job, I’m going to play with this tonight because I have a gallery that this effect may be quite cool on. Thanks.

  • SJL Web Design (October 15, 2009)

    Thanks for the great jQuery script Janko! Really cool effect.

  • Andrzej (October 15, 2009)

    Fantastic article Janko! As always.

    I love experiments with jQuery and MooTools :)

    I enjoyed this post a lot.

    Cheers!

  • Chris Raymond (October 19, 2009)

    I’m looking at Retweetradar and don’t see the effect at all, on FF3 on a Mac 10.5

  • Janko (October 19, 2009)

    Thanks, everyone!

    Chris: It is visible for me on WinXP.

  • Christian (October 21, 2009)

    Awesome script! I love jQuery more every time I see something cool like this :)

  • matthew (October 23, 2009)

    I just had a look at the demo and this works really great. Thanks for sharing and I also really like your logo Janko.

  • Website laten maken (October 30, 2009)

    Wow, another great script Janko!

    Don’t really know where I should use it :P, but it looks great!

  • Marco Aurélio Silva (November 29, 2009)

    Hey! Nice script!!

  • davetiye (December 11, 2009)

    thanks. superr scprit

  • Kannan (December 19, 2009)

    Wareh…wah….very nice tips! You are rocking….!

  • Theo (February 5, 2010)

    Very good tutorial thanx. I like the first one.

    Cheers !

  • Ved (March 9, 2010)

    Correction –

    .css("opacity", currentOpacity = 100 ? "1" : "0." + parseInt(currentOpacity));

    should be
    .css("opacity", currentOpacity == 100 ? "1" : "0." + parseInt(currentOpacity));