Class: Fx.Tween

Contains Fx.Tween and the Element shotcut Element.tween.

Extends:

Fx

Fx.Tween Method: constructor

The Tween effect, used to transition any CSS property from one value to another.

Синтаксис:

var myFx = new Fx.Tween(element, [, options]);

Аргументи:

1. element - (mixed) An Element або the string id of an Element to apply the transition to.
2. options - (object, optional) The Fx options object, plus the options described below:

Options:

• property - (string) The CSS property to transition to, fабо example 'width', 'colабо', 'font-size', 'bodyer', etc. If this option is omitted, you are required to use the property as a first argument fабо the start and set methods. Defaults to null.

Примітки:

• Any CSS property that can be set with Element:setStyle can be transitioned with Fx.Tween.
• If a property is not mathematically calculable, like bodyer-style або 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.

Див. також:

• Fx

Fx.Tween Method: set

Sets the Element's CSS property to the specified value immediately.

Синтаксис:

myFx.set(property, value);

Аргументи:

1. property - (string) The css property to set the value to. Omit this if you use the property option.
2. value - (mixed) The value to set the CSS property of this instance to.

Повертає:

• (object) This Fx.Tween instance.

Приклади:

var myFx = new Fx.Tween(element);
//Immediately sets the background color of the element to red:
myFx.set('background-color', '#f00');

Примітка:

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

Fx.Tween Method: start

Transitions the Element's CSS property to the specified value.

Синтаксис:

myFx.start([property,] [from,] to);

Аргументи:

1. property - (string, if not in options) The css property to tween. Omit this if you use the property option.
2. from - (mixed, optional) The starting CSS property value fабо the effect.
3. to - (mixed) The target CSS property value fабо the effect.

Повертає:

• (object) This Fx.Tween instance.

Приклади:

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');

Примітки:

• 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 coLoss, either RGB або Hex values may be used.
• If you use the property option, you must not use the property argument in the start and set methods.

Hash: Element.Properties

see Element.Properties

Element Property: tween

Sets and gets default options fабо the Fx.Tween instance of an Element.

Setter:

Синтаксис:

el.set('tween'[, options]);

Аргументи:

• options - (object) the Fx.Tween options.

Повертає:

• (element) This Element.

Приклади:

el.set('tween', {duration: 'long'});
el.tween('color', '#f00');

Getter:

Синтаксис:

el.get('tween', [options]);

Аргументи:

1. property - (string) the Fx.Tween property argument.
2. options - (object) the Fx.Tween options.

Повертає:

• (object) The Element's internal Fx.Tween instance.

Приклади:

el.get('tween', {property: 'opacity', duration: 'long'}).start(0);

Примітки:

• When initializing the Element's tween instance with Element:set, the property to tween SHOULD NOT be passed.
• The property must be specified when using Element:get to retrieve the actual Fx.Tween instance, and in calls to Element:tween.
• When options are passed to either the setter або the getter, the instance will be recreated.
• As with the other Element shotcuts, the difference between a setter and a getter is that the getter returns the instance, while the setter returns the element (fабо chaining and initialization).

Native: Element

Custom Native to allow all of its methods to be used with any DOM element via the dollar function $.

Element Method: tween

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

Синтаксис:

myElement.tween(property, startvalue[, endvalue]);

Аргументи:

1. property - (string) the css property you want to animate. Omit this if you previously set the property option.
2. startvalue - (mixed) The start value fабо the transition.
3. endvalue - (mixed) The end value fабо the transition. If this is omitted, startvalue will be used as endvalue.

Повертає:

• (element) This Element.

Приклади:

//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');

Див. також:

• Fx.Tween

Element Method: fade

Element shotcut method fабо tween with opacity. Корисний fабо fading an Element in and out або to a certain opacity level.

Синтаксис:

myElement.fade([how]);

Аргументи:

1. how - (mixed, optional: defaults to 'toggle') The opacity level as a number або string representation. Possible values include:
   • 'in' - Fade the element to 100% opacity.
   • 'out' - Fade the element to 0% opacity.
   • 'show' - Immediately set the element's opacity to 100%.
   • 'hide' - Immediately set the element's opacity to 0%.
   • 'toggle' - If visible, fade the element out, otherwise, fade it in.
   • (number) - A float value between 0 and 1. Will fade the element to this opacity.

Повертає:

• This Element.

Приклади:

$('myElement').fade('out'); //Fades "myElement" out.
$('myElement').fade(0.7); //Fades "myElement" to 70% opacity.

Element Method: highlight

Element shotcut method fабо tweening the background colабо. Immediately transitions an Element's background colабо to a specified highlight colабо then back to its set background colабо.

Синтаксис:

myElement.highlight([start, end]);

Аргументи:

1. start - (string, optional: defaults to '#ff8') The colабо from which to start the transition.
2. end - (string, optional: defaults to Element's set background-colабо) The background colабо to return to after the highlight effect.

Примітка:

If no background colабо is set on the Element, або its background colабо is set to 'transparent', the default end value will be white.

Повертає:

• (element) This Element.

Приклади:

//Will immediately change the background to light blue, then back to its original color (or white):

$('myElement').highlight('#ddf');
 
//Will immediately change the background to light blue, then fade to grey:
$('myElement').highlight('#ddf', '#ccc');