This document provides an overview of the scriptaculous library for creating visual effects in web pages. It summarizes the basic syntax for calling effects, lists common options for customizing effects, and describes some of the built-in effects including fading, sliding, highlighting, and toggling elements. Key information about default effect options and combining effects is also presented.

1. scriptaculous
a eld guide to
Combination Effects
the basic syntax effects require just a DOM ID
you can use options for customizing
Effect.EffectName('dom_id') options are optional!
with options
Effect.EffectName('dom_id', {option:value, option:value})
optional, if you don't want yellow fade to white
highlight syntax
new Effect.Highlight('dom_id', {startcolor:'hex', endcolor:'hex'})
this bit's critical
default options delay: seconds, in decimals
delay before starting effect
Default options are available for all fx.
from: 0.0 to 1.0 to: 0.0 to 1.0
Some fx have custom options (not
stages of the effect, 0 being no effect;
shown except for Highlight) a Fade set to to:.5 would fade half-way
duration: seconds, in decimals transition: transition method
controls ease in & out, can be used for special fx
how long the effect will last
queue: 'parallel' || 'front' || 'end'
in & out effects whether the effects run simultaneously or in order
Appear / Fade
BlindUp / BlindDown
toggling
SlideUp / SlideDown
Grow / Shrink
toggle() will show an item that's hidden, or
hide an item that's shown—using the in or out
out effects
effect, respectively, from one of the in & out
DropOut
effects families shown to the left.
Fold
Puff
the basic idea:
Squish
SwitchOff
Effect.toggle('dom_id', 'fx_family')
attention effects toggle accepts these fx families:
appear
Highlight
Without an fx family name,
Pulsate blind
toggle() defaults to appear.
Shake slide
cheatsheet © amy hoy (www.slash7.com)
more on scriptaculous: http://script.aculo.us/