Arguments:

Options:

property - (string) The CSS property to transition to, for example 'width', 'color', 'font-size', 'border', etc. If this option is omitted, you are required to use the property as a first argument for the start and set methods. Defaults to null.

Notes:

Any CSS property that can be set with Element:setStyle can be transitioned with Fx.Tween.

If a property is not mathematically calculable, like border-style or background-image, it will be set immediately upon start of the transition.

If you use the property option, you must not use the property argument in the start and set methods.

See Also:

Examples:

Tweens the height of a element while clicking a link (which stops the default behavior), using a transition and a long duration.
It uses the link option so when clicking the link twice it behaves smoothly. When the start value is omitted, the current
value of the property (in this example the height property) will be used.

It is also possible to use the Element properties: .get('tween') and .set('tween') and the tween method.
In this example the property method is not set as an option, now it should be set as argument of the tween method.
This is something you can choose for both the Fx.Tween constructor or this approach.

Syntax:

Arguments:

property - (string, if not in options) The css property to tween. Omit this if you use the property option.

from - (mixed, optional) The starting CSS property value for the effect.

to - (mixed) The target CSS property value for the effect.

Returns:

(object) This Fx.Tween instance.

Examples:

var myFx = new Fx.Tween(element);
// transitions the background color of the Element from black to red:
myFx.start('background-color', '#000', '#f00');
// transitions the background color of the Element from its current color to blue:
myFx.start('background-color', '#00f');

Notes:

If only one argument is provided, other than the property argument, the first argument to start will be used as the target value, and the initial value will be calculated from the current state of the element.

When using colors, either RGB or Hex values may be used.

If you use the property option, you must not use the property argument in the start and set methods.

Element shortcut method which immediately transitions any single CSS property of an Element from one value to another.

Syntax:

myElement.tween(property, startValue[, endValue]);

Arguments:

property - (string) the css property you want to animate. Omit this if you previously set the property option.

startValue - (mixed) The start value for the transition.

endValue - (mixed) The end value for the transition. If this is omitted, startValue will be used as endValue.

Returns:

(element) This Element.

Examples:

// transitions the width of 'myElement' from its current width to 100px:
$('myElement').tween('width', '100');
// transitions the height of 'myElement' from 20px to 200px:
$('myElement').tween('height', [20, 200]);
// transitions the border of 'myElement' from its current to '6px solid blue':
$('myElement').tween('border', '6px solid #36f');

Returns:

Examples:

Element shortcut method for tweening the background color. Immediately transitions an Element's background color to a specified highlight color then back to its set background color.

Syntax:

myElement.highlight([start, end]);

Arguments:

start - (string, optional: defaults to '#ff8') The color from which to start the transition.

end - (string, optional: defaults to Element's set background-color) The background color to return to after the highlight effect.

Note:

If no background color is set on the Element, or its background color is set to 'transparent', the default end value will be white.

Returns:

(element) This Element.

Examples:

//immediately changes the background to light blue, then back to its original color (or white):
$('myElement').highlight('#ddf');
//immediately changes the background to light blue, then fades to grey:
$('myElement').highlight('#ddf', '#ccc');