One of the most common JavaScript effects is fading elements and text in and out. Fortunately, it isn’t very difficult to script and doesn’t require a JavaScript framework. This tutorial walks through creating a well-coded standalone fading script.

To begin, let’s create a wrapper object for our functions. It will return two functions: an initialization function and a tween function that will handle the animation. For the init function, we will pass the ID of the element we want to animate as the first parameter. The second parameter will be a toggle (1 or -1) to determine the direction of the fade. The third will be the target (0-100) which will default to 0 or 100 based on the direction.

var fadeEffect=function(){
	return{
		init:function(id, flag, target){
		},
		tween:function(){
		}
	}
}();

Now let’s fill in the first function…. here is a breakdown of the lines followed by the code:

1. Create an object variable to reference the element we are fading
2. Clear any active fading on the element
3. Set the target opacity to the passed variable else check the direction to determine the default
4. Set the internal flag to 1 or -1 based on the boolean (0/1) passed as the parameter
5. Get the opacity off the DOM if available else assume it is 0 (for purposes of this demo)
6. Set the tween function to be executed every 20 milliseconds until cancelled

this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? 100 : 0;
this.flag = flag || -1;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);

Next we complete the tween function to update the opacity/alpha on the previously set interval.

1. Check if the current opacity is equal to the target opacity
2. If previous is true clear the interval/exit
3. Else
4. Calculate the new opacity with easing (modify the “.05″ value to control speed)
5. Divide the calculated value by 100 for standard CSS opacity (0-1)
6. Set the IE based opacity filter (0-100)

if(this.alpha == this.target){
	clearInterval(this.elem.si);
}else{
	var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
	this.elem.style.opacity = value / 100;
	this.elem.style.filter = 'alpha(opacity=' + value + ')';
	this.alpha = value
}

And all together now…

var fadeEffect=function(){
	return{
		init:function(id, flag, target){
			this.elem = document.getElementById(id);
			clearInterval(this.elem.si);
			this.target = target ? target : flag ? 100 : 0;
			this.flag = flag || -1;
			this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
			this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
		},
		tween:function(){
			if(this.alpha == this.target){
				clearInterval(this.elem.si);
			}else{
				var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
				this.elem.style.opacity = value / 100;
				this.elem.style.filter = 'alpha(opacity=' + value + ')';
				this.alpha = value
			}
		}
	}
}();

You can call the function like so:

fadeEffect.init('fade', 1, 50) // fade in the "fade" element to 50% transparency
fadeEffect.init('fade', 1) // fade out the "fade" element

Click here for the demo.

Click here to download.

Related posts:

JavaScript Color Fading Script Fading JavaScript Slideshow – TinyFader JavaScript Dropdown Menu Input & Textarea Character Limit Counter with jQuery