Fx. Styles.js

Author

License

MIT-style license.

Summary

Fx. Styles.js	Contains Fx.Styles
Fx. Styles	Allows you to animate multiple css properties at once; Extends Fx.Base, inherits all its properties.
Properties
start	The function you’ll actually use to execute a transition.
Element	Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties
effects	Applies an Fx.Styles to the Element; This a shortcut for Fx.Styles.

Fx. Styles

Allows you to animate multiple css properties at once; Extends Fx.Base, inherits all its properties. Includes colors. Colors must be in hex format.

Arguments

el	the $(element) to apply the styles transition to
options	the 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
start	The function you’ll actually use to execute a transition.

Properties

start

The function you’ll actually use to execute a transition.

Arguments

an object

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
effects	Applies 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.sineInOut});
myEffects.start({'height': [10, 100], 'width': [900, 300]});