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.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.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.

This lightweight JavaScript allows for easy color transitions. Add fading effects to tables, divs and more. You can target an elements background, border or text color.

Below is the command to call the function.

colorFade('divid', 'background', 'ece7b4', 'f9bcbc', 25, 30)

The first parameter is the id of the element you are targeting. The second is the property to fade which can be the background, border or text. The third is the hex value of the starting color. The third is the hex value to fade to. The fourth and fifth are both optional. The first is the the number of times to divide the color difference and the last is the transition speed.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here to view the demo.

Click here to download the script.

Update 5/5/2008 – I have tweaked a few things and integrated some performance improvements based on Nate’s suggestions.