Fade the Background Color of an Element using Javascript

There are many DHTML (dynamic HTML) effects that people are using on their web pages currently but one of our favorite DHTML effects is the background color fade. Fading the background color of an element means that you gradually change that element's background color from one color to another. This effect is useful for many things especially when using AJAX or other methods that update a web page without reloading it because it gives you a way to draw attention to the area of the web page that has been updated so the user doesn't miss it. For example, if you make an AJAX call that updates a list of visitors currently on your site you could highlight the background of the new visitors and have the background slowly fade back to normal indicating that something new was added. The way to achieve this background fading effect is to use some javascript code that handles the gradual fading. We have put together our own background fade script for your use and benefit and we called it NLB Background Color Fader. Here are some features of our script:

Features

• Automatically calculates smooth transitions for different fade durations. This means that it doesn't matter if your fade time is 1 second or 1 minute, the transition should always appear to be smooth.
• Fading of an element will be canceled when a new fade is called for the same element. This means that you won't get strange fading effects if you need to fade the same element before it's done with another fading process.
• You can fade different elements on the page at the same time using different colors and different durations.
• NLB Background Color Fader does all the hard work so you don't have to. One easy-to-implement line of code is all it takes to use the fading effect.
• Did we mention that it's free?

See it in Action

We have setup an example page that demonstrates what the script can do. While the example page is quite ugly it does show a couple of different elements that can be faded. You can view the source of the example to get an idea of how the javascript functions are called and what they do. The example is located here: NLB_bgFade.html

Download the Script

The javascript is a little too large for us to display in this article so we have made the script source available for download here: NLB_bgFade.js

We ask that you please leave the header comment in the javascript file and please give credit where credit is due. We spend a lot of time on this scripts and we appreciate it when you give us credit for our hard work.

Example Usage

If you had a DIV element on your page with an id of 'div1' and you wanted the background to start at red and then slowly fade to white over a period of 10 seconds when a user clicked a link you would do it like this:

<a href="javascript:NLBfadeBg('div1','#FF0000','#FFFFFF','10000');">Fade DIV</a>

Any element can be faded as long as it supports the backgroundColor style in javascript and as long as it has a unique id assigned to it. You can fade the background of the html body, a DIV, a paragraph, a list item, etc.