Using JavaScript libraries like jQuery and Mootools does simplify your code, but this comes with the price of an added footprint. Often times, the same effects can be accomplished in raw JavaScript with little to no hassle. Indeed, this tutorial will explain how to create the classic fade effect without resorting to jQuery or Mootools.

The fade effect, as its name denotes, is an animation used to fade an element off of a page. You can find a demo of it in the jQuery documentation.

To begin, let’s create a fade function that accepts a DOM element and a time as parameters:

function fade( elem, time )

To achieve the fade effect, we can use the CSS opacity property, which determines the transparency of an element. Setting the opacity to 1 means the object is fully visible. As the value lowers, so too does the transparency. Consequently, 0 represents a completely invisible element.

Our logic will roughly abide by the following outline:

1. Find the starting opacity of elem, the given element. This is the value we have to reduce to 0 in time, the given number of milliseconds.
2. Begin an asynchronous recursion loop that runs every 100 milliseconds.
3. In the loop, decrement the opacity by the correct fraction to ensure that in time milliseconds, elem has an opacity of 0.

The correct fraction noted in step 3 will be equal to the starting opacity divided by time / 100. This is because the loop will go through time / 100 iterations in time milliseconds. In each iteration, the opacity must be decremented by the starting opacity / ( time / 100 ) to ensure that it will end up as 0 (the total decrement will equal the starting opacity) after the loop finishes its execution.

Let’s write some preliminary code based off this outline:

function fade( elem, time )
{
	var startOpacity = elem.style.opacity || 1;
	elem.style.opacity = startOpacity;

	(function go() {
		elem.style.opacity -= startOpacity / ( time / 100 );
		setTimeout( go, 100 );
	})();
}

Note that startOpacity is assigned to 1 if elem.style.opacity is not explicitly set. This explains why we have to set elem.style.opacity in the following line, as it may not be defined.

After finding the opacity, the go function is recursively called as per our specifications. In the code’s current state, however, it does not stop. To determine when it should finish executing, we have to check whether the element has faded. This can be done by monitoring its opacity in relation to the target value, or 0:

if( elem.style.opacity > 0 )
	setTimeout( go, 100 );
else
	elem.style.display = 'none';

Not only do we stop calling go when we’re done, but we also set the display to none so that other elements are repositioned; elem should not continue to take up page space after it has faded. This is the typical functionality of JavaScript libraries and applies to our code as well.

To ice our cake by making the code compatible with IE, we can use the filter property:

elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

The final code is included below:

function fade( elem, time )
{
	var startOpacity = elem.style.opacity || 1;
	elem.style.opacity = startOpacity;

	(function go() {
		elem.style.opacity -= startOpacity / ( time / 100 );

		// for IE
		elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

		if( elem.style.opacity > 0 )
			setTimeout( go, 100 );
		else
			elem.style.display = 'none';
	})();
}

And that’s it! See you next time.