Introducing script.aculo.us

Some of the effects are grouped into pairs ( Fade/Appear,BlindUp/BlindDown, andSlideUp/SlideDown). script.aculo.us provides a convenient method to toggle between the effects,Effect.toggle:

  Effect.toggle('target') /* uses Fade/Appear */
  Effect.toggle('target', 'blind')
  Effect.toggle('target', 'slide')

The Effect.* methods take an optional second parameter: a hash of options. Some options are effect-specific, but we’ll look at those that apply to every effect.

durationspecifies how long the effect should last, in seconds. For example:

  <%= link_to_function "Fade",
        "new Effect.Fade('target', { duration:5 })" %>

fpsdetermines the frames per second. The default is 25, and it can’t exceed 100. For example:

  <%= link_to_function "Choppy Fade",
        "new Effect.Fade('target', { duration:10, fps:2 })" %>

Note that because script.aculo.us effects are time-based, rather than frame-based, slower systems will automatically drop frames as necessary.

delayspecifies the time in seconds before the effect will be started. For example:

  <%= link_to_function "Fade",
        "new Effect.Fade('target', { delay:2 })" %>

fromandtodefine the starting and ending points of the effect as values between0and1. For example, you could jump directly to the halfway point of an effect, then gradually fade to 25 percent, and then stop:

  <%= link_to_function "Fade with from",
        "new Effect.Fade('target', { from:0.5, to:0.25 })" %>