Changes the opacity of the element with fade

gistfile1.js

/**
* Changes the opacity of the element with fade
* --------------------------------------------
* var mode : is string and can be 'in' or 'out'
* var time : the time of the fade in milliseconds
* var elementId : the id of the element
* var finalOpacity : de opacity we want at the end of the process, because sometimes we don't want full transparency or opacity
*/
function fade (mode, elementId, time, finalOpacity) {
	/* trick for setting a default value, just in case we don't set any value on the function call */
	/* if not defined, set to '100' if mode == 'in' or '0' if mode == 'out' */
	finalOpacity = typeof finalOpacity !== 'undefined' ? finalOpacity : mode === 'in' ? 1 : 0;

	var element = document.getElementById(elementId);

	/* if the opacity of the element is undefined then we assume that is 0 (if we want to fade in) or 1 (if we want to fade out) */
	var initialOpacity = element.style.opacity !== 'undefined' ? element.style.opacity : mode === 'in' ? 0 : 1;


	/* conversion the units of opacities to work with [0, 100] range instead of [0, 1] */
	initialOpacity *= 100;
	finalOpacity *= 100;

	/* cross-browser function to set the opacity of the element */
	function setOpacity (opacity) {
		/* the opacity comes with [0, 100] range, and we need to convert to [0, 1] again for the major browsers, except IE */
		opacity /= 100;
		element.style.opacity = opacity;
		element.style.MozOpacity = opacity;
		element.style.KhtmlOpacity = opacity;
		element.style.filter = 'alpha(opacity=' + (opacity * 100) + ');';
	}

	/* the jump interval between opacities of the fade
	for example, maybe we want to jump from 5 to 5 instead from 10 to 10 */
	var interval = 10;

	if (mode === 'in') {

		/* Recursive function that do the loop to fade-in */
		function fadeIn (i) {
			/* the condition to stop the loop is: if the final opacity is greater than the index */
			if (i <= (finalOpacity)) {
				setOpacity(i);
				/* Time between each of the transitions */
				var timeInterval = Math.round((time / ((finalOpacity - initialOpacity) / interval)));
				/* Recursive call, in which we pass the index incrementated by the interval, executed by the calculated time */
				setTimeout(function () { fadeIn (i + interval) }, timeInterval);
			} else {
				/* if we need to do something at the end of the transition we must put this inside of that else statement */
			}
		}
		/* initial call to the recursive function */
		fadeIn(initialOpacity);

	} else if (mode === 'out') {

		/* Recursive function that do the loop to fade-in */
		function fadeOut (i) {
			/* the condition to stop the loop is: if the final opacity is greater than the index */
			if (i >= (finalOpacity)) {
				setOpacity(i);
				/* Time between each of the transitions */
				var timeInterval = Math.round((time / ((initialOpacity - finalOpacity) / interval)));
				/* Recursive call, in which we pass the index incrementated by the interval, executed by the calculated time */
				setTimeout(function () { fadeOut (i - interval) }, timeInterval);
			} else {
				/* the inside of the elese is executed just after the end of the fade, in that case we delete the target div */
				element.parentNode.removeChild(element);
			}
		}
		/* initial call to the recursive function */
		fadeOut(initialOpacity);
	}
}