Core Effects Overview
The seven core effects Effect.Opacity, Effect.Scale, Effect.Morph, Effect.Move, Effect.Highlight, Effect.Parallel, Effect.Tween are the foundation of the script.aculo.us Visual Effects JavaScript library.
Availability
script.aculo.us V1.0 and later.
Syntax
The basic syntax to start an effect is:
new Effect.EffectName(element, required-params, [options]);
element can be either a string containing the id of the element, or a Java Script DOM element object.
required-params depend on the effect being called and may not be needed. Most effects do not have required parameters. See the documentation for the core effects to learn if the effect has required parameters or if this parameter should be omitted.
The options parameter is used to give any additional customization parameters to the effect. There are general and effect-specific options. It’s called like this:
new Effect.Opacity('my_element', {
duration: 2.0,
transition: Effect.Transitions.linear,
from: 1.0,
to: 0.5
});
Common Parameters
All core effects support following settings in their options parameter:
| Option | Description |
|---|---|
| duration | duration of the effect in seconds, given as a float. Defaults to 1.0. |
| fps | Target this many frames per second. Default to 25. Can’t be higher than 100. |
| transition | Sets a function that modifies the current point of the animation, which is between 0 and 1. Following transitions are supplied: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker, Effect.Transitions.pulse, Effect.Transitions.spring, Effect.Transitions.none and Effect.Transitions.full. |
| from | Sets the starting point of the transition, a float between 0.0 and 1.0. Defaults to 0.0. |
| to | Sets the end point of the transition, a float between 0.0 and 1.0. Defaults to 1.0. |
| sync | Sets whether the effect should render new frames automatically (which it does by default). If true, you can render frames manually by calling the render() instance method of an effect. This is used by Effect.Parallel(). |
| queue | Sets queuing options. When used with a string, can be ‘front’ or ‘end’ to queue the effect in the global effects queue at the beginning or end, or a queue parameter object that can have { position: ’front/end’, scope: ’scope’, limit: 1 }. For more info on this, see Effect Queues. |
| delay | Sets the number of seconds to wait before the effect actually starts. Defaults to 0.0. |
Additionally, the options parameter also can be supplied with callback methods, so you can have JavaScript executed at various events while the effect is running. The callbacks are supplied with a reference to the effect object as a parameter.
| Callback | Description |
|---|---|
| beforeStart | Called before the effects rendering loop is started, or as soon as it is added to a queue. |
| beforeSetup | Called before the effect is setup. |
| afterSetup | Called after the effect is setup and immediately before the main effects rendering loop is started. |
| beforeUpdate | Called on each iteration of the effects rendering loop, before the redraw takes place. |
| afterUpdate | Called on each iteration of the effects rendering loop, after the redraw takes place. |
| afterFinish | Called after the last redraw of the effect was made. |
Effect instances have the following useful properties and methods:
| Variable | Description |
|---|---|
| effect.element | The element the effect is applied to. |
| effect.options | Holds the options you gave to the effect. |
| effect.currentFrame | The number of the last frame rendered. |
| effect.startOn, effect.finishOn | The times (in ms) when the effect was started, and when it will be finished. |
| effect.effects[] | On an Effect.Parallel effect, there’s an effects[] array containing the individual effects the parallel effect is composed of. |
| effect.cancel() | Stop the effect as is. |
| effect.inspect() | Get basic debugging information about the instance. |
var myEffect = new Effect.Opacity('my_element', {
duration: 2.0,
transition: Effect.Transitions.linear,
from: 1.0,
to: 0.5
});
//...
// example instance properties
myEffect.element; // $('my_element')
myEffect.currentFrame; // 12
myEffect.cancel(); // stop animation
Transitions Demo
Reset demo
new Effect.Move(this, {
x: 200,
transition: Effect.Transitions.spring
});
