Fx. Style.js

Contains Fx.Style

License

MIT-style license.

Summary
Fx. Style.jsContains Fx.Style
Fx. StyleThe Style effect, used to transition any css property from one value to another.
Properties
hideSame as Fx.Base.set (0); hides the element immediately without transition.
setSets the element’s css property (specified at instantiation) to the specified value immediately.
startDisplays the transition to the value/values passed in
ElementCustom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties
effectApplies an Fx.Style to the Element; This a shortcut for Fx.Style.

Fx. Style

The Style effect, used to transition any css property from one value to another.  Includes colors.  Colors must be in hex format.  Inherits methods, properties, options and events from Fx.Base.

Arguments

elthe $(element) to apply the style transition to
propertythe property to transition
optionsthe Fx.Base options (see: Fx.Base)

Example

var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});
marginChange.start(10, 100);
Summary
Properties
hideSame as Fx.Base.set (0); hides the element immediately without transition.
setSets the element’s css property (specified at instantiation) to the specified value immediately.
startDisplays the transition to the value/values passed in

Properties

hide

Same as Fx.Base.set (0); hides the element immediately without transition.

set

Sets the element’s css property (specified at instantiation) to the specified value immediately.

Example

var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});
marginChange.set(10); //margin-top is set to 10px immediately

start

Displays the transition to the value/values passed in

Arguments

from(integer; optional) the starting position for the transition
to(integer) the ending position for the transition

Note

If you provide only one argument, the transition will use the current css value for its starting value.

Example

var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});
marginChange.start(10); //tries to read current margin top value and goes from current to 10

Element

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

Summary
Properties
effectApplies an Fx.Style to the Element; This a shortcut for Fx.Style.

Properties

effect

Applies an Fx.Style to the Element; This a shortcut for Fx.Style.

Arguments

property(string) the css property to alter
options(object; optional) key/value set of options (see <Fx.Style>)

Example

var myEffect = $('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear});
myEffect.start(10, 100);
//OR
$('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear}).start(10,100);
The Style effect, used to transition any css property from one value to another.
Immediately sets the value with no transition.
returns the element passed in with all the Element prototypes applied.
Base class for the Effects.

Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and GeSHi