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.
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
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?
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.
really nice work and nice jquery plugin, again really nice work.
Great tutorial! jQuery’s capabilities really amaze me. Thanks for sharing this!
Gotta love jQuery!
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.
This is a nice script! I will experiment on this. TY for the recommendation.
Thanks everyone for the comments!
partouf: it works for me in FF 3.5.3. RGB version should be cross-browser compatible anyway.
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.
Thanks for the great jQuery script Janko! Really cool effect.
Fantastic article Janko! As always.
I love experiments with jQuery and MooTools :)
I enjoyed this post a lot.
Cheers!
I’m looking at Retweetradar and don’t see the effect at all, on FF3 on a Mac 10.5
Thanks, everyone!
Chris: It is visible for me on WinXP.
Awesome script! I love jQuery more every time I see something cool like this :)
I just had a look at the demo and this works really great. Thanks for sharing and I also really like your logo Janko.
Wow, another great script Janko!
Don’t really know where I should use it :P, but it looks great!
Hey! Nice script!!
thanks. superr scprit
Wareh…wah….very nice tips! You are rocking….!
Very good tutorial thanx. I like the first one.
Cheers !
Correction -
.css("opacity", currentOpacity = 100 ? "1" : "0." + parseInt(currentOpacity));
should be
.css("opacity", currentOpacity == 100 ? "1" : "0." + parseInt(currentOpacity));