Fading in an element

In this recipe, we will produce a fade-in effect by animating a change in opacity of the element from 0% to 100%. This offers a more subtle approach to making an element visible than simply changing from invisible to visible, or from not displayed to displayed.

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 load the Moodle programming environment, which in turn loads the YUI3 environment with which we will be working.

In the following example, we create an anim_fadein.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_fadein.php');
$PAGE->requires->js('/cook/anim_fadein.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;float:left;padding:30px;opacity:0;">
<h1...