Script.aculo.us, by default, will run animations in parallel, which is great because you don't have to worry about the complexities of doing that yourself. These two effects will run simultaneously:
new Effect.Fade('something')
new Effect.Fade('somethingelse')
If you wish to run them sequentially, there area number of options:
- Use a delay
- Use Effect Queues
- Use built-in callbacks
Which method you choose will depend on the complexity of your animation, user interaction and other actions that may be running on your page.
Effect Delays
Each effect in Script.aculo.us can take both a duration and a delay parameter. You can use both of these together to run effects sequentially. The example below will fade both elements in one second, although the second one will begin after a delay of one second. This gives the appearance of second one starting when the first is complete.
new Effect.Fade('something',{duration:1.0})
new Effect.Fade('somethingelse',{delay:1.0,duration:1.0})
Effect Queues
Script.aculo.us also supports queuing effects. You can place as many effects in the queue as you wish and insert these into the front or the end of the queue. In this example, the first effect will run last because it is placed at the end of the queue.
new Effect.Fade('something',{queue:'end'})
new Effect.Fade('somethingelse')
Callbacks
Effects support callbacks. These callbacks act like events. You can use these, among other things, to stack effects inside each other.
new Effect.Fade('something',{afterFinish:function(){new Effect.Fade('somethingelse')}})
If you prefer, you can also format your code in other ways. This can help make your code more readable if you are nesting multiple effects:
new Effect.Fade('something',{
afterFinish:
function(){
new Effect.Fade('somethingelse')
}
})
The ones most frequently used are:
beforeStart, which occurs before the animation begins.
afterFinish, which runs when the animation is complete.
There are two more, beforeUpdate and afterUpdate that occur during each frame of the animation. You can use these for a variety of things, such as displaying a progress bar, a counter or something more complex, such as synchronizing the movement of another object on the screen.
