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.
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 ...
Get Prototype and Scriptaculous: Taking the Pain out of JavaScript now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.