Fx and ../../../../../../wiki/_export/xhtml/mootorial/06-fx/fx.css

The MooTools library includes two foundation classes used for Fx extensions: Fx and Fx.CSS.

Here is the documentation for Fx.js.

The Fx class is the heart of all the Fx classes and it's rather basic. It's not something you'll be using directly, but whenever you want to author a new effect, you might want to extend the Fx class (thought it's much more likely that you'll extend Fx.Tween or Fx.Morph. I won't go into a lot of detail on its functions and properties; if you want to write your own Fx class, look at the code, and look at how the other Fx.* classes use it.

Briefly, the Fx class contains the following functions and properties that you'll typically reference and interact with whenever you use a class based on it.

Options:

transition

The transition effect to use; see [[03-fx.transition|Fx.Transition]] for details.

duration

The duration of the effect (in milliseconds); can also be one of:

• 'short' - 250ms
• 'normal' - 500ms
• 'long' - 1000ms

unit

Defaults to "px"; other options include "em" for fonts and "%"

link

• 'ignore' - Any calls made to start while the effect is running will be ignored. (Synonymous with 'wait': true from 1.x)
• 'cancel' - Any calls made to start while the effect is running will take precedence over the currently running transition. The new transition will start immediately, canceling the one that is currently running. (Synonymous with 'wait': false from 1.x)
• 'chain' - Any calls made to start while the effect is running will be chained up, and will take place as soon as the current effect has finished, one after another.

fps

the frames per second for the transition; default is 30

Events

start/complete/cancel

Define functions to execute when the effect begins, ends, or is interrupted.

chainComplete

Define a function to execute when the effect chain completes.

Methods

set()

Jumps to the value you specify; for instance, if you have an effect for width, you can call //set(100)// and the width of the element will be immediately set to 100 without a transition.

start(from, to)

Note that from is optional. //.start()// is what you call to actually execute the effect, and you pass it the start and end values to transition from and to respectively. If you only pass in one value, the current state of the object will be used (i.e. if you called //.start(100)// on an Fx object that managed width, it would transition the element to 100px wide from whatever width it was at).

cancel()

Stops an effect transition at whatever point it's at currently.

pause() & resume()

This pauses an effect temporarily and allows you to resume it later.

I know that's not very helpful, but again, this is just the foundation class, all the fun stuff starts with the helper classes that implement Fx.

New in MooTools 1.2 is the ability to link the Fx chain so that you can do this:

new Fx.Tween('fxTarget', {
	property: 'width',
	link:'chain'
}).start(100).start(0).start(100);

The result is that each instruction will wait for the previous one.

Sorry, I'm not going to go into Fx.CSS much either. It's used by Fx.Tween, Fx.Morph, Fx.Elements to parse css properties. It's worth mentioning here in the same way that Fx is; your classes may want to make use of it. Rather than try and demonstrate this core functionality here, I'll instead recommend that if writing such classes are something you think you're up to, dig into Fx.Tween, Fx.Morph, and Fx.Elements to see how it's used internally.