Prototype and Scriptaculous: Taking the Pain out of JavaScript

4.2. Visual Effects

The Scriptaculous Visual effects library consists of five core effects:

• Effect.Highlight

• Effect.MoveBy

• Effect.Opacity

• Effect.Parallel

• Effect.Scale

Each of these effects can be called via a constructor, passing in an element id, any mandatory parameters, and, finally, options:

new Effect.Highlight('id'[,options]);
new Effect.MoveBy('id',toTop,toLeft,[,options]);
new Effect.Opacity('id'[,options]);
new Effect.Parallel('id'[,options]);
new Effect.Scale('id',percent,[,options]);

The Effect options object is a class with known properties.

Table 4-1. Scriptaculous properties

Property	Type	Values	Description
duration	Number	Number > 0	Duration of effect in seconds
delay	Number	Number > 0	Delay before starting effect in seconds
from	Number	In range [0..1.0]	Amount of effect to start from
to	Number	In range [0..1.0]	Amount of effect to end at
transition	Function(number) -> number
queue	String

The fact that there are only five effects might seem a bit strange until you realize that these effects can be composed to make combination effects. A combination effect is a composition of one or more core effects, and although there are a number of packaged combination effects, these are really code examples showing how to write your own.

That aside, the packaged combination effects include:

• Effect.Appear

• Effect.Fade

• Effect.Puff

• Effect.DropOut

• Effect.Shake

• Effect.Highlight

• Effect.SwitchOff

• Effect.BlindDown

• Effect.BlindUp

• Effect.SlideDown ...