This is an example of a Javascript function that gradually changes the opacity of a selected HTML object (in this example, a <div> object). The Javascript code allows you to fade in or fade out an object using a finite number of steps. You are also allowed to set the minimal and maximal opacity of that object.

This code was tested on Firefox 1.x and Internet Explorer 6.0. This code will not work Opera 7.2 right now. I believe it may work on other browsers, but I would appreciate confirmation and/or bug fixes.

In the page below, I show two <div> HTML objects with two colors. The objects overlap to show the changes in opacity.

In addition, there is a debug window on top that shows the progress. You can turn off the debugging messages by calling o.toggleDebug(). Where o is the object being faded.

In the test below, you can change the number of steps, duration and range of opacity. Then you can press on Fade In or Fade Out buttons to see the objects fading in or out as specified. Optionally, you can turn debugging on to see a record of each step in the debug window.

You can download the entire library with the test example by clicking on folder.zip below.

Steps
Duration
Min Opacity
Max Opacity
Debug
Step 1
Step 2

Hello World

Hello World