Sequencing multiple animations

We can change as many attributes as we want during one animation, but to get multiple animations to occur linearly (one after the other) we must use a new approach. YUI allows for this by providing an end event which is fired when an animation is complete. In this way, we may chain as many animations as we wish, one after the other.

In this recipe, we will chain two animations, reducing the size of a div element, and then fading it out.

Here, we can see the key steps in this animation by looking at a selection of frames:

How to do it...

We begin by creating a PHP page to set up a basic Moodle programming environment. In this case, anim_multiple.php, with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_multiple');
$PAGE->requires->js('/cook/anim_multiple.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style...