Introducing script.aculo.us - Toggling

(Page 3 of 4 )

 

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')

Options

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 })" %>

Next: Queues >>
 

More Ruby-on-Rails Articles
More By O'Reilly Media

Comments On: Introducing script.aculo.us

· This article is an excerpt from the book "Ajax on Rails," published by O'Reilly. We...   >>> Post your comment now!

Buy this book...

This article is excerpted from chapter four of the book Ajax on Rails, written by Scott Raymond (O'Reilly, 2007; ISBN: 0596527446). Check it out today at your favorite bookstore. Buy this book now.