Earlier, in 2007, we released the jQuery Color Plugin, and at that time it provided you with color animation capabilities. Now we are preparing the second version of this plugin, which will add API, RGBA, HSLA and a number of other features. Beta time has come ! The repository of this plugin is located at github.com/jquery/jquery-color . And on code.jquery.com two versions of the plug- in are also available - uncompressed and compressed by minifiers .

Overview of new features

RGBA

Now we support the RGBA format for color values. In browsers that do not support RGBA, the backgroundColor value closest to the element will be used to calculate the intermediate color approximation. Although this is not “real” alpha transparency, this method will at least provide the illusion of alpha when interacting with a single-color background. Here’s what Opera 10, Chrome 10, Firefox 3.6, and IE 6 browsers look like when they run that alpha overlay demo :


')

HSLA

We also now support the indication of HSLA color values in all browsers, with the exception of alpha, in support of which we use the techniques described above.

Convenient API

Instead of a simple group of private utility methods , the $ .Color () call is now used, creating a new Color object. A new Color object can be initialized in several different ways: a color name, a hexadecimal color code, a CSS-like RGBA or HSLA value, an RGBA value array, or an object with a color component. Now there are helpers for each of the color components, like .red () and .hue () , which allow you to read or set its value. Combined with helper functions (for example, .toRgbString () , .transition () and .is () ), the $ .Color object is now able to provide all your color needs. See the README at github.com/jquery/jquery-color for an overview of all the new functions. Now jQuery. Color is suitable not only for animation of simple colors: you can now use its API for complex color calculations and animations!

Immediate examples:

//   Color  : var red = $.Color( 'rgba(255,0,0,1)' ); //  CSS- //    Color    : var orange = $.Color( '#FF0000' ).green( 153 ); //       : var between = $.Color([ 255, 0, 0 ]).transition( "blue", 0.5 ); 

Partial color animation

We added the ability to specify only one or two color components, so you can partially animate a color ( here is an example ):

 //       elem.animate({ backgroundColor: $.Color({ saturation: 0 }) }, 1000); 

Bug reports, suggestions for new features

If you want to report any problems with the new color plugin, or if you want to offer a new feature, please contact github .

We would also like to see and show everyone some excellent examples of the new $ .Color beta , so please share them with us in the comments.