Introducing script.aculo.us

In some circumstances, you may want to chain effects, so that they occur sequentially. As a first attempt, you might simply call one effect after the other:

  <%= link_to_function "Blind Up/Down",
        "new Effect.BlindUp('target');
         new Effect.BlindDown('target')" %>

Unfortunately, this won’t have the desired result. As new effects are created, script.aculo.us adds them to a global queue. By default, these effects are executed in parallel—which means these two effects will collide with each other. To specify an effect’s position in the queue, use thequeueoption:

  <%= link_to_function "Blind Up/Down",
        "new Effect.BlindUp('target');
         new Effect.BlindDown('target', { queue: 'end' })" %>

Now the two effects will execute sequentially, rather than at once. If you want more than two effects sequentially, just keep adding them with aqueue ofend. Thequeue option can also take a value offront, which causes the effect to be executed before anything else in the queue.

script.aculo.us also supports multiple queues, so that you can create named scopes for effects queues that run independently. For more information on creating queue scopes, see Chapter 11.

The options hash can also take parameters for callbacks that are executed through the effect’s life cycle. beforeStart is called before the main effects rendering loop is started.beforeUpdateis called on each iteration of the effects rendering loop, before the redraw takes places.afterUpdateis called on each iteration of the effects rendering loop, after the redraw takes places.afterFinishis called after the last redraw of the effect was made. Callbacks are passed one argument, a reference to the effect object. For example:

  <%= link_to_function "Fade with callback",
        "new Effect.Fade('target', { afterUpdate: function(effect) {
          effect.element.innerHTML = effect.currentFrame;
        }})" %>

Chapter 11 coversEffectcallbacks in more detail.

The transition option determines the pattern of change—a constant linear rate of change, gradual speed up, or anything else. There are eight standard transitions, and you can easily define new ones. To override the default transition for an effect, use thetransitionoption like this:

  <%= link_to_function "Fade with wobble",
        "new Effect.Fade('target',
           { transition: Effect.Transitions.wobble })" %>

The available transitions are:linear,reverse,none,full,sinoidal,pulse,wobble, andflicker. Chapter 11 describes them in detail and explains how to create custom transitions. To get a feel for the possibilities, create a demo for yourself of each transition:

  <% %w( linear reverse none full sinoidal pulse
        wobble flicker ).each do |name| %> 
   <%= link_to_function "Fade with #{name}",
         "new Effect.Fade('target',
           { transition: Effect.Transitions.#{name} })" %>
  <% end %>

Please check back next week for the continuation of this article.