1
pimps
spam pimp it un-pimp it
Wednesday, October 14, 2009 11:34:55 AM GMT

Fade colors using jQuery
Fade colors using jQuery
 
www.jankoatwarpspeed.com -- 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. Download source  View demo 1 In the example in this tutorial we'll will fade links in unordered list like in the example below.     Some text here     Some text here     ... 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 Download source  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 H
beebee posted 156 days, 20 hours, 6 minutes ago     show counter code
tags: Tutorials

No comments yet, be the first one to post comment.

To post your comment please login or signup