Categories

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.2

    cssProperty   A valid processable color.

  • jQuery.Color( red, green, blue, alpha )

    version added: 1.2

    red   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.2

    element   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 );
    });