Fx. Styles.js

Contains Fx.Styles

License

MIT-style license.

Summary
Fx. Styles.jsContains Fx.Styles
Fx. StylesAllows you to animate multiple css properties at once; Colors must be in hex format.
Properties
startExecutes a transition for any number of css properties in tandem.
ElementCustom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties
effectsApplies an Fx.Styles to the Element; This a shortcut for Fx.Styles.

Fx. Styles

Allows you to animate multiple css properties at once; Colors must be in hex format.  Inherits methods, properties, options and events from Fx.Base.

Arguments

elthe $(element) to apply the styles transition to
optionsthe fx options (see: Fx.Base)

Example

var myEffects = new Fx.Styles('myElement', {duration: 1000, transition: Fx.Transitions.linear});
 
//height from 10 to 100 and width from 900 to 300
myEffects.start({
    'height': [10, 100],
    'width': [900, 300]
});
 
//or height from current height to 100 and width from current width to 300
myEffects.start({
    'height': 100,
    'width': 300
});
Summary
Properties
startExecutes a transition for any number of css properties in tandem.

Properties

start

Executes a transition for any number of css properties in tandem.

Arguments

objan object containing keys that specify css properties to alter and values that specify either the from/to values (as an array) or just the end value (an integer).

Example

see Fx.Styles

Element

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

Summary
Properties
effectsApplies an Fx.Styles to the Element; This a shortcut for Fx.Styles.

Properties

effects

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

Example

var myEffects = $(myElement).effects({duration: 1000, transition: Fx.Transitions.Sine.easeInOut});
myEffects.start({'height': [10, 100], 'width': [900, 300]});
Allows you to animate multiple css properties at once; Colors must be in hex format.
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