In the previous CSS article, we set up a transparent element using CSS through -moz-opacity property (Mozilla’s specific) and opacity property (CSS3). Now let’s try to move another step ahead and learn how to create a cool fade in/out effect using opacity property.

To create a fading effect, we will need a little help from JavaScript. We’ll use JS’ setTimeout() function and clearTimeout() function to perform the fade animation. All we need to do, in each ‘animation‘ sequence, we either increase (fade-in) or decrease (fade-out) the element’s (image) opacity value until we hit 1 (fade-in) or 0 (fade-out). Each animation is processed through fadeIn() and fadeOut() function (source code below), and the setTimeout() function is used to set when the next fadeIn/fadeOut function will be called. So when those functions is called multiple times sequently, we’ll obtain the fading effect.

Before we get to the source code, let’s see how the effect will looks like:

Fade Out

Fade In

Move your mouse over the box and the fade effect will begin. To stop or to restore the box to its original condition, mouse your omouse away from the box.

Here’s the source code for the JavaScript portion (copy-paste and save it as fade.js)

[js]var fadeInObj = null;
var fadeOutObj = null;

function fadeIn(obyek,step,delay) {
clearTimeout(fadeOutObj);
var opacity = document.getElementById(obyek).style.opacity;
opacity = opacity * 100;
opacity = opacity + step;
if (opacity > 100) {
opacity = 100;
}
document.getElementById(obyek).style.opacity = opacity / 100;
if (opacity < 100) {
fadeInObj = setTimeout('fadeIn("' + obyek + '",' + step + ',' + delay + ');',delay);
} else {
clearTimeout(fadeInObj);
}
}

function fadeOut(obyek,step,delay) {
clearTimeout(fadeInObj);
var opacity = document.getElementById(obyek).style.opacity;
opacity = opacity * 100;
opacity = opacity - step;
if (opacity < 0) {
opacity = 0;
}
document.getElementById(obyek).style.opacity = opacity / 100;
if (opacity > 0) {
fadeOutObj = setTimeout(’fadeOut(”‘ + obyek + ‘”,’ + step + ‘,’ + delay + ‘);’,delay);
} else {
clearTimeout(fadeOutObj);
}
}[/js]

and this is the HTML portion for the sample above:
[html]

[/html]

Have fun! :d