Scriptaculous Effects
Composite Application Framework uses the
Scriptaculous library for client-side effects. For example, the Tooltip control's fade and appear effect or the Modal Dialog control's grow and shrink effect are from the Scriptaculous library. Some controls, specifically the controls with show/hide options enable configuring the control's hide and show effects using the
hideEffect and
showEffect expert properties. You can specify any standard Scriptaculous effect name, for example, Effect.Fade, or any custom
Composite Application Framework effect name, for example, Effect.CAF.SlideOpen, for these values.
You can specify additional options for these effects using the hideEffectOptions and showEffectOptions expert properties. Options are specified in JavaScript Object Notation (JSON), for example:
direction: "bottom", duration: 0.5, transition: Effect.Transitions.wobble
Many effects work with their defaults, and do not require you to specify any options.
Standard Scriptaculous Effects
Show
Effect.Appear: Fade in.
Effect.BlindDown: Reveals from top to bottom.
Effect.SlideDown: Slide open, downward.
Effect.Grow: Grow from center.
Hide
Effect.Fade: Fade out.
Effect.BlindUp: Cover from bottom to top.
Effect.SlideUp: Slide close, upward.
Effect.Shrink: Shrink to center.
Effect.Puff: Expand and fade out.
Effect.SwitchOff: Flicker and drop out.
Effect.DropOut: Move down and fade out.
Effect.Squish: Shrink to corner.
Effect.Fold: Blind up, then shrink to corner.
Highlight
Effect.Shake: Shake back and forth.
Effect.Pulsate: Fade in, fade out, fade in, fade out.
Effect.Highlight: Fade in yellow background, fade back to white background.
Custom CAF Effects
Show
Effect.CAF.Appear: Extends Effect.Appear with a default duration of 0.3.
Effect.CAF.SlideOpen: Slide open in any direction; options:
direction: Direction to slide: left, top, right, or bottom, the default value.
duration: Duration, in seconds, of slide; defaults to 0.3.
Effect.CAF.SlideOpen.Left: Slide open leftward.
Effect.CAF.SlideOpen.Top: Slide open upward.
Effect.CAF.SlideOpen.Right: Slide open rightward.
Effect.CAF.SlideOpen.Bottom: Slide open downward.
Hide
Effect.CAF.Fade: Extends Effect.Fade with a default duration of 0.3.
Effect.CAF.SlideClose: Slide close in any direction; options:
direction: Direction from which to slide: left, top, right, or bottom, the default value.
duration: Duration, in seconds of slide; defaults to 0.3.
Effect.CAF.SlideClose.Left: Slide close from the left.
Effect.CAF.SlideClose.Top: Slide close from the top.
Effect.CAF.SlideClose.Right: Slide close from the right.
Effect.CAF.SlideClose.Bottom: Slide close from the bottom.
Highlight
Effect.CAF.Shake: Extends
Effect.Shake with additional options:
x: Amount, in pixels to shake horizontally; defaults to 20.
y: Amount in pixels to shake vertically; default to 0.
duration: Duration in seconds of a single shake; defaults to 0.05.
count: Number of shakes; defaults to 5.
Effect.CAF.Highlight: Fade in a halo, fade back to normal; options:
duration: Duration, in seconds of effect; defaults to 1.0.
Effect.CAF.Flicker: Fade to white, fade back; options:
duration: Duration, in seconds of flicker; defaults to 1.0.
to: Degree to which to fade, from 1.0 to 0.0, where 1.0 is a complete fade and 0.0 is no fade; defaults to 0.7.
Effect.CAF.Flash: Combination flicker and highlight; options:
duration: Duration, in seconds of effect; defaults to 1.0.
Common Effect Options
duration: Duration, in seconds of effect; defaults to 1.0.
transition: Transition method to use for effect. This method is passed a number between 0.0 and 1.0, and returns a number between 0.0 and 1.0; defaults to Effect.Transitions.sinoidal.
from: Transition start; defaults to 0.0.
to: Transition end; defaults to 1.0.
queue: Advanced queue options.
direction: Transition direction, such as a string
top; used only by directional effects.
Effect Transitions
You can specify a transition method for most effects using the effect's transition option. This method can modify the behavior of the effect by making the effect appear to speed up or slow down as it progresses, or even oscillate between the start state and the end state. The transition method is passed a number between 0.0 and 1.0, and it returns a number between 0.0 and 1.0. The default method is Effect.Transitions.sinoidal, which causes the effect to accelerate in the middle and slow as it ends.
Standard Scriptaculous Transitions
Effect.Transitions.linear: Linear transition from 0 to 1.
Effect.Transitions.sinoidal: Sine wave transition, accelerates in the middle, slows at the end, from 0 to 1.
Effect.Transitions.reverse: Linear transition from 1 to 0.
Effect.Transitions.flicker: Unstable transition between 0.5 and 1.
Effect.Transitions.wobble: Oscillates between 0 and 1, converging on 0.5.
Effect.Transitions.pulse: Five linear oscillations between 0 and 1.
Effect.Transitions.none: Always returns 0.
Effect.Transitions.full: Always returns 1.
Custom CAF Transitions
Effect.Transitions.CAF.pulse1: Smooth single pulse from 0 to 1 and back to 0.
Effect.Transitions.CAF.flash1: Pulses from 0 to 1 quickly, then from 1 to 0 more slowly.