The jQuery UI effects framework is modularized, just like the widget framework, allowing you to choose which parts of the package you want to use and reduce the code requirements. You can create a custom download for yourself,which takes into account dependencies between the modules.

Before looking at how to create a new effect, you should be aware of the other functionality already offered by the jQuery UI effects framework, so that you can use it when developing your own effects.

Underlying the individual jQuery UI effects modules is a core of commonly used functionality. These abilities are implemented here so that you don’t need to re-invent them and can apply them immediately to your own effects. Along with color animation, you’ll find animation from the attributes of one class to another, and several low-level functions that may be useful in developing new effects.

Color animation

The Effects Core module adds custom animation support for style attributes that contain color values: foreground and background colors, and border and outline colors. jQuery itself only allows the animation of attributes that are simple numeric values, with an optional units designator such as px, em, or %. It doesn’t know how to interpret more complex values, like colors, or how to increment those values correctly to achieve the desired transition, such as from blue to red via an intermediate purple color.

Color values are made up of three components: the red, green, and blue contributions, each with a value between 0 and 255. They can be specified in HTML and CSS in a number of different ways, as listed here:

• Hexadecimal digits—#DDFFE8
• Minimal hexadecimal digits—#CFC
• Decimal RGB values—rgb(221, 255, 232)
• Decimal RGB percentages—rgb(87%, 100%, 91%)
• Decimal RGB and transparency values—rgba(221, 255, 232, 127)
• A named color—lime

The red, green, and blue components must be separated out and individually animated from their initial values to their final ones, before being combined into the new composite color for the intermediate steps. jQuery UI adds animation steps for each affected attribute to correctly decode the current and desired colors, and to change the value as the animation runs. In addition to the color formats described in the previous list, the animate call can also accept an array of three numeric values (each between 0 and 255) to specify the color. Once these functions are defined, you can animate colors the same way you would do for other numeric attributes:

$('#myDiv').animate({backgroundColor: '#DDFFE8'});

jQuery UI contains an expanded list of named colors that it understands, from the basic red and green to the more esoteric darkorchid and darksalmon. There is even a transparent color.