script.aculo.us Effects

The script.aculo.us effects are divided into two groups:
Core Effects: The following six core effects are the foundation of the script.aculo.us Visual Effects Java Script library.
All the core effects support various common parameters as well as effect specific parameters and these effect names are case sensitive.

Common parameters:

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
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}.
delay	Sets the number of seconds to wait before the effect actually starts. Defaults to 0.0.
direction	Sets the direction of the transition. Values can be either 'top-left', 'top-right', 'bottom-left', 'bottom-right' or 'center' (Default). Applicable only on Grow and Shrink effects.

e.g.
new Effect.Opacity(this,{ duration: 2.0, transition: Effect.Transitions.linear, from: 1.0, to: 0.5 });

Syntax to call Effect Functions :
new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])

Example:
new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200,{ scaleY:false, scaleContent:false });
Callback Methods: You can apply any of the above mentioned parameter to any element at various events while the effect is running. This is done by writing a callback method in Javascript for that element.
To use a callback method you have additional four parameters as listed below:
beforeStart - Called before the main effects rendering loop is started.
beforeUpdate - Called on each iteration of the effects rendering loop, before the redraw takes places.
afterUpdate - Called on each iteration of the effects rendering loop, after the redraw takes places.
afterFinish - Called after the last redraw of the effect was made.

Within the effect object, there are several useful variables you can access and use them in your callback functions:
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 - The times (in ms) when the effect was started.
effect.finishOn - The times (in ms) when the effect will be finished after starting an effect.
effect.effects[] - On an Effect.Parallel effect, there's an effects[] array containing the individual effects the parallel effect is composed of.
e.g.
function OnFinish(obj){alert("Finishing - I'm element :" + obj.element.id);}
function OnStart(obj){alert("Starting - I'm element :" + obj.element.id);}
function myEffect(myObject)
{
new Effect.Highlight
(
myObject,
{ startcolor:'#ffffff', endcolor:'#ffffcc', duration: 0.5, afterFinish: OnFinish, beforeStart: OnStart}
);
}

1. Effect.Opacity: This effect gradually changes an element's opacity to a given level. You can use this element to show or hide any element.
This effect starts with the element's current opacity unless the from option is defined and ends with an opacity defined by the to option, defaulting to 1.0.

new Effect.Opacity('id_of_element', [options]); OR new Effect.Opacity(element, [options]);
Example:

  function ShowEffect(element){ new Effect.Opacity(element, {duration:1, from:0, to:1.0});}

function HideEffect(element){ new Effect.Opacity(element, {duration:1, from:1.0, to:0});}

2. Effect.Scale: This effect gradually scales an element up or down, possibly on only one axis (horizontal or vertical). You can use this effect to adjusts the size of the target element.

Syntax:
new Effect.Scale('id_of_element', scaleToPercent, [options]);
OR
new Effect.Scale(element, scaleToPercent, [options]);

The scaleToPercent parameter specifies a numeric value that indicates the percentage of the starting size to which the target element is to be scaled. So a value of 200 would scale the target to twice its starting size, while a value of 50 would scale it to half of its starting size.

Effect Specific Parameters (addition to common parameters):
scaleX - Sets whether the element should be scaled horizontally, defaults to true.
scaleY - Sets whether the element should be scaled vertically, defaults to true.
scaleContent - Sets whether content scaling should be enabled, defaults to true.
scaleFromCenter - If true, scale the element in a way that the center of the element stays on the same position on the screen, defaults to false.
scaleFrom - Sets the starting percentage for scaling, defaults to 100.0.
scaleMode - Either 'box' (default, scales the visible area of the element) or 'contents' (scales the complete element, that is parts normally only visible byscrolling are taken into account).

You can also precisely control the size the element will become by assigning the originalHeight and originalWidth variables to scaleMode as follows:
scaleMode: { originalHeight: 500, originalWidth: 300 }

Example: function ScaleEffect(element) { new Effect.Scale(element, 150); }

3. Effect.Morph: This effect changes the CSS properties of an element. This takes a set of CSS properties and gradually migrates the element(s) relevant style values to these targets.
This effect takes a single specific option, named style. For the sake of convenience, you can express your target style definition in three ways:
* As a CSS class name. The element will then morph toward the style specification for this class name.
* As an inline style specification (think style= attribute values).
* As a hash of CSS properties. Both official (hyphen-based) and camelized (for example, borderStyle) syntaxes are allowed for the property names.
NOTE: The original style for an element must be in its style attribute, not in an external stylesheet, for Scriptactulous to morph it.

Syntax:
new Effect.Morph('id_of_element', [options]);
OR
new Effect.Morph(element, [options]);

Effect Specific Parameters (addition to common parameters):
style - The target style of your element, writing with the standard CSS syntax, or as a hash

Example:
function MorphEffect(element){
new Effect.Morph(element,
{style:'background:#f00; color:#fff;'+
'border: 20px solid #f88; font-size:2em',
duration:0.8});
}

4. Effect.MoveBy: This effect moves an element. Its older version has name Effect.MoveBy
In order for this effect to work correctly across all browsers, the element to be moved must be a positioned element. That is, it must have a CSS position rule applied, and the value of the position may be either of absolute or relative.

Syntax:
new Effect.MoveBy('id_of_element', {x, y, mode, [options]});
OR
new Effect.MoveBy(element, {x, y, mode, [options]});

Effect Specific Parameters (addition to common parameters):
x-coordinate - This specifies the change in horizontal position. A negative x value moves the element to the left.
y-coordinate - This specifies the change in vertical position. A negative value moves the element "up" the page.
mode - This specifies the positioning mode of the element. It can be either absolute or relative. By default its relative

Example: function MoveEffect(element){ new Effect.MoveBy(element, {x:10,y:10,duration:1}) }

5. Effect.Highlight: The Highlight effect is used to call attention to the target element by changing its background color. Without any options, the background color of the element will change to yellow, and then, throughout the course of the effect duration, morph back into the original background color.

Syntax:
new Effect.Highlight('id_of_element', [options]);
OR
new Effect.Highlight(element, [options]);

Effect Specific Parameters (addition to common parameters):
startcolor - Sets the starting color of the element.s background. If omitted, a light yellow color is used.
endcolor - Sets the ending color of the element.s background. If omitted, the original background color of the element is used if it can be determined. Otherwise, the default is white.
restorecolor - Sets the final color of the background after the effect has completed.

Example:
function HighlightEffect(element)
{
new Effect.Highlight(element, {startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00", duration: 8 })
}

6. Effect.Parallel: This is a special effect to allow to combine more than one core effect into a parallel effect. It's the only effect that doesn't take an element as first parameter, but an array of subeffects.

Syntax: new Effect.Parallel([array of subeffects], [options]);

Example:
function ParallelEffect(element)
{
new Effect.Parallel
(
[ new Effect.MoveBy(element, 100, 200, { sync: true }), new Effect.Scale(element, 200, { sync: true }) ],
{duration: 2}
);
}