you will need

Before we begin, please visit moofx and download the lastest version of moo.fx.js, moo.fx.pack.js and prototype.lite.js.

Okay, let's get straight to the point!

step 1: create the document

Create a new xhtml document. Make sure the doctype is strict xhtml 1.0 or xhtml 1.1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>your title here</title>
  </head>
<body>
</body>
</html>

step 2: add the scripts

Include the scripts you've just downloaded in the <head> section of your document. Make sure that the document can actually reach the scripts.

step 3: a little css/xhtml

Create a new <div> with an id called box. Now, add a background color to the box using css so you can see the effect. Please note that you CANNOT add padding or borders to the object that will have the effects. In this case, it's box. Create a new link that's outside the div called box. Give the new link an id called fade.

step 4: a little scripting

Okay we're almost finished. Open a new <script> tag just below the other ones. Inside it we're going to set and call our effect. Okay, let's create the opacity effect! Without the double quotes, write fader = new fx.Opacity('box'); Now we're gonna be fancy just like Valerio! Under the fader write:

$('fade').onclick = function() {
  fader.toggle()
};

Remember the link we made earlier that had id="fade", well all this function does it says when we click that link, toggle the opacity effect. Your script should like this:

<script type="text/javascript">
window.onload = function() {
  fader = new fx.Opacity('box');
    $('fade').onclick = function() {
     fader.toggle();
   };
};
</script>

that's it

Yea, it really was that simple! Seriously. Test your page and hopefully your box will magically disappear. Click here to view a working example of this tutorial.