The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
citizenColor, add HSL color animations to jQuery.
According to w3c, RGB color schemes is hardware-oriented, and non-intuitive wheareas HSL color schemes, representing colors with their Hue, Saturation and Lightness, makes much more sense for human beings. This is why HSL color values are now part of the draft of CSS3
With citizenColor, you don't have to wait for CSS3 to use HSL color scheme with jQuery's animate function!
$('h1').animate({color: 'hsl(128,70%,20%)'});But you can do much more than that : use HSL to it's full potential by modifying color channels separately, or doing relative color animation.
$('body').animate({backgroundColor: hsl(+=0,+=0%,+=50%)});This code will, as you can expect, increase the lightness of your background by 50% (from 20% to 70% for example).
$('body').animate({backgroundColor: hsl(-=24,80%,20%)});This code will, as you can expect, decrease the hue of your background of 24 degrees, set saturation to 80% and lightness to 20%.
You don't have to worry about the 0-360 hue interval or the 0-100 saturation and lightness interval, citizenColor will take care of values out of range.
$('h1').animate({color: 'hsl(128,70%,20%)'});
$('h1').animate({color: 'hsl(-=200,+=40%,20%)'});This code will produce the same result as:
$('h1').animate({color: 'hsl(288,100%,20%)'});You can find more information about HSL color on wikipedia: http://en.wikipedia.org/wiki/HSL_and_HSV
And on w3c's CSS3 draft: http://www.w3.org/TR/css3-color/#hsl-color
Currently, citizenColor is not a first class sitizen of jQuery city. Unfortunately, you cannot use it on elements with different colors.
