jQuery.Color()
Categories: CSS | Color Object
jQuery.Color( [ color ] )Returns: Color
Plugin: jQuery.color
Description: Create a manipulable color object.
-
jQuery.Color( [ color ] )
version added: 1.2cssProperty A valid processable color.
-
jQuery.Color( red, green, blue, alpha )
version added: 1.2red A valid red value (Integer 0 - 255).
green A valid green value (Integer 0 - 255).
blue A valid blue value (Integer 0 - 255).
alpha A valid alpha transparency value (Number 0.0 - 1.0).
-
jQuery.Color( element, cssProperty )
version added: 1.2element The DOM element to query for the color.
cssProperty A css color property of the element to query for the color.
The $.Color()
function allows you to create and manipulate color objects that are accepted by jQuery's .animate()
and .css()
functions via supplied cssHooks.
Returns a new Color object, similar to $()
or $.Event
.
Processable colors:
- A other Color a copy of the color object.
- A valid css color string (name, hex, rgb, rgba).
- A rgba color tuple. Example:
[ red, green, blue, alpha ]
- A rgba color map. Example:
{ red: red, green: green, blue: blue, alpha: alpha }
- A hsla color map. Example:
{ hue: hue, saturation: saturation, lightness: lightness, alpha: alpha }
undefined
/ null
values for colors indicate non-existence. This signals the .transition()
function to keep
whatever value was set in the other end of the transition. For example, animating to $.Color([ 255, null, null, 1 ])
would only animate the red and alpha values of the color.
If a color is created using any of the HSLA functions or parsers, it will keep the _rgba
array up to date as well as
having a _hsla
array. Once an RGBA operation is performed on HSLA, however, the _hsla
cache is removed and all
operations will continue based off of rgb (unless you go back into HSLA). The ._hsla
array follows the same format
as ._rbga
, [hue, saturation, lightness, alpha ]
. If you need to build an HSLA color from an HSLA array,
$.Color().hsla( array )
works for that purpose.
Colors with 0 saturation, or 100%/0% lightness will be stored with a hue of 0.
-
Animate to greyscale background.
HTML:
<button id="go">Simple</button> <button id="sat">Grayscale</button> <div id="block">Hello!</div>
CSS:
div { background-color:#bada55; width:100px; border:1px solid green; }
Code:
$("#go").click(function(){ $("#block").animate({ backgroundColor: "#abcdef" }, 1500 ); }); $("#sat").click(function(){ $("#block").animate({ backgroundColor: $.Color({ saturation: 0 }) }, 1500 ); });