Hacking at 0300

I was playing with Brandon Aaron's gradient plugin (based on Steven Slayer's gradient) and started adding options and playing with it, so now you can use named colors, percent sizes, and animation.

Download the code.

See the demo page.

It's more than twice the size now, but it's been fun playing with it. Maybe someone else will find it useful.

Use

$('div').gradient([options]) creates a color gradient in the background of the matched elements without images. It works by creating a series of absolutely positioned <div> elements with varied background colors.

Three ways to call gradient:

$('div').gradient([options])

Call with an options object. The following options are available:

from {String|Array}

The color to start from. Can be one of the following:

• CSS color designation (like ('#0faaee' or '#fff' or 'rgb(1,1,100)' or 'rgb(50%,40%,75%)')
• Color name (like 'aqua' or 'blue')
• For compatibility with the original gradient, a six-digit hex number without the leading '#' (like '0faaee')
• Attribute name (like 'backgroundColor' or 'border-top-color'; the attribute will be copied from the matched element. If the element does not have the named attribute, the ancestors of the element are checked)
• RGB array (like [0, 255, 255])

Default: 'backgroundColor'

to {String|Array}

The color to end the gradient. Same values as from. Default: '#ffffff'

direction {'vertical'|'horizontal'}

Axis of the gradient. This is the orientation of each stripe; 'vertical' means the colors progress from left to right, 'horizontal' means the colors progress from top to bottom. Default: 'horizontal'

length {Number|String}

Size of the gradient (height for direction: 'horizontal', width for direction: 'vertical'; it always fills the element in the other direction). Can be a number of pixels or a CSS size (like '10px' or '2em' or '50%'). Default: '100%'

position {'left'|'right'|'top'|'bottom'}

Where in the element to place the gradient, aligned with the left or right edge (for direction: 'vertical') or top or bottom edge (for direction: 'horizontal'). Default: 'top'

opacity {Number}

Opacity (0—1) of the gradient.

complete {Function|undefined}

Callback function when gradient is completed (probably most useful for animations). Scope (this) is the DOM element. Default: null

duration {Number|'fast'|'slow'|'normal'}

If not 0, animate the gradient filling the element. This is the standard animation duration or speed. Default: 0

easing {String}

The easing (the way the animation runs; see Robert Penner's article and demonstrations). jQuery UI includes a bunch of cool easing equations. Default: 'linear'

$('div').gradient(from [, to [, direction]])

Simple calling signature to set the most common options, like $('div').gradient('blue','green')

$('div').gradient('remove')

Removes the gradients if any from the matched elements.