Fx.js

Applies visual transitions to any element.  Contains Fx.Base, Fx.Style and Fx.Styles

Dependencies

Moo.js, Function.js, Array.js, String.js, Element.js

Author

Valerio Proietti, http://mad4milk.net

License

MIT-style license.

Summary
Fx.js Applies visual transitions to any element.
Fx.Base Base class for the Mootools fx library.
Properties
set Immediately sets the value with no transition.
custom Executes an effect from one position to the other.
clearTimer Stops processing the transition.
Fx. Style The Style effect; Extends Fx.Base, inherits all its properties.
Properties
hide Same as <Fx.Base.set>(0)
goTo will apply Fx.Base.custom, setting the starting point to the current position.
Fx. Styles Allows you to animate multiple css properties at once; Extends Fx.Base, inherits all its properties.
Properties
custom 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
effect Applies an Fx.Style to the Element; This a shortcut for Fx.Style.
effects Applies an Fx.Styles to the Element; This a shortcut for Fx.Styles.
Fx. Transitions A collection of transition equations for use with the <Fx> Class.
Properties
linear
sineInOut

Fx.Base

Base class for the Mootools fx library.

Options

onStart the function to execute as the effect begins; nothing (Class.empty) by default.
onComplete the function to execute after the effect has processed; nothing (Class.empty) by default.
transition the equation to use for the effect see Fx.Transitions; default is Fx.Transitions.sineInOut
duration the duration of the effect in ms; 500 is the default.
unit the unit is ‘px’ by default (other values include things like ‘em’ for fonts or ‘%’).
wait boolean: to wait or not to wait for a current transition to end before running another of the same instance. defaults to true.
fps the frames per second for the transition; default is 30
Summary
Properties
set Immediately sets the value with no transition.
custom Executes an effect from one position to the other.
clearTimer Stops processing the transition.

Properties

set

Immediately sets the value with no transition.

Arguments

to the point to jump to

Example

var myFx = new Fx.Style('myElement', 'opacity').set(0); //will make it immediately transparent

custom

Executes an effect from one position to the other.

Arguments

from integer: staring value
to integer: the ending value

Examples

var myFx = new Fx.Style('myElement', 'opacity').custom(0,1); //display a transition from transparent to opaque.

clearTimer

Stops processing the transition.

Fx. Style

The Style effect; Extends Fx.Base, inherits all its properties.  Used to transition any css property from one value to another.

Arguments

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

Example

var marginChange = new fx.Style('myElement', 'margin-top', {duration:500});
marginChange.custom(10, 100);
Summary
Properties
hide Same as <Fx.Base.set>(0)
goTo will apply Fx.Base.custom, setting the starting point to the current position.

Properties

hide

Same as <Fx.Base.set>(0)

goTo

will apply Fx.Base.custom, setting the starting point to the current position.

Arguments

val the ending value

Fx. Styles

Allows you to animate multiple css properties at once; Extends Fx.Base, inherits all its properties.

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.linear});
myEffects.custom({
'height': [10, 100],
'width': [900, 300]
});
Summary
Properties
custom The function you’ll actually use to execute a transition.

Properties

custom

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
effect Applies an Fx.Style to the Element; This a shortcut for Fx.Style.
effects Applies an Fx.Styles to the Element; This a shortcut for Fx.Styles.

Properties

effect

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

Example

var myEffect = $('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear});
myEffect.custom(10, 100);

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

Fx. Transitions

A collection of transition equations for use with the <Fx> Class.

See Also

Fxtransitions.js for a whole bunch of transitions.

Credits

Easing Equations, © 2003 Robert Penner (http://www.robertpenner.com/easing/), Open Source BSD License.

Properties

linear

sineInOut

Base class for the Mootools fx library.
Executes an effect from one position to the other.
function $( el )
returns the element passed in with all the Element prototypes applied.
The Style effect; Extends <Fx.Base>, inherits all its properties.
Allows you to animate multiple css properties at once; Extends <Fx.Base>, inherits all its properties.
My Object Oriented javascript.
Contains Function prototypes, utility functions and Chain.
function $A( array )
Copy the array and returns it.
Same as Array.copy, but as function.
Contains Array prototypes and the function $A;
Contains String prototypes and Number prototypes.
Contains useful Element prototypes, to be used with the dollar function $.
Returns an empty function
A collection of transition equations for use with the <Fx> Class.
Cool transitions, to be used with <Fx.Js>