Changing an element's color

In this recipe, we will animate an element changing color. We will change the background color of the div element from blue to green.

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_color.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_color.php');
$PAGE->requires->js('/cook/anim_color.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;float:left;padding:5px;">
<h1>Animation: Color</h1>
</div>
<?php
echo $OUTPUT->footer();
?>

We also create an associated JavaScript file, anim_color.js, where we will add the animation code, with the following content:

YUI().use("node...