O'Reilly logo

Prototype and Scriptaculous: Taking the Pain out of JavaScript by Chris Angus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required