Fading out an element

In this recipe, we will produce a fade-out effect by animating a change in opacity of the element from 100% to 0%. This offers a more subtle approach to making an element become invisible than simply using CSS to change the visibility or display properties to hidden or none.

We can see the key steps in this animation by looking at the following selection of frames:

How to do it...

We begin by creating a PHP page to load the Moodle programming environment, which in turn loads the YUI3 environment with which we will be working.

In this example, we create an anim_fadeout.php file with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_fadeout.php');
$PAGE->requires->js('/cook/anim_fadeout.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;float:left;padding:30px;">...