[UPDATE: There’s now a much better (shorter, cleaner, more modern) solution than using Javascript to fade elements in and out. Add a CSS3 transition property (tutorial here) to the elements you want to fade, then use Javascript only to set the opacity to the changed value. The transition will happen by itself. Although yes, the CSS3 sets a single fixed transition duration. If you want the fade animation on the same element occurring for different durations at different times, this code is still the only way out.]

I needed a simple code for Javascript fade animation, i.e. fading in and out of HTML elements, but couldn’t find online exactly what I wanted. Borrowing on the fundamental animation mechanism from this page, which is the closest I got, I wrote my own short code. It works in all major browsers (Chrome, Firefox, Opera, Safari, IE). The same code works for both fading in and out, from whatever initial opacity value to whatever final value, depending on the arguments of the function. In the code, the arguments you can specify are the following: eid is the id of the HTML element you wish to run the fade on. The fade goes from the initial CSS opacity value initOp to the final value finalOp in time TimeToFade measured in milliseconds. You don’t have to specify the last parameter, time, which you’ll see if you look at the HTML that I’ve shown afterwards.

Javascript

function fade(eid, initOp, finalOp, TimeToFade, time)
{
	if (initOp==0)
	{
		document.getElementById(eid).style.visibility="visible";
	}
	var curTick = new Date().getTime();
	var elapsedTicks = curTick - time;
	var newOp = initOp+(finalOp-initOp)*elapsedTicks/TimeToFade;
	if (Math.abs(newOp-initOp)>Math.abs(finalOp-initOp))
	{
		document.getElementById(eid).style.opacity=finalOp;
		if (finalOp==0)
		{
			document.getElementById(eid).style.visibility="hidden"
		}
		return;
	}
	document.getElementById(eid).style.opacity=newOp;
	setTimeout("fade( '" + eid + "'," + initOp + "," + finalOp + "," + TimeToFade + "," + time + ")", TimeToFade/100);
}

HTML

<div id="box">;
<input type="button" onclick="fade('box', 1, 0.3, 5000, new Date().getTime())" value="Fade"/>;
</div>

If you choose your element to be a div, all child elements in the div also fade. In the HTML, put the last argument of the function exactly as given. On clicking the button, this example fades out the box div from an opacity value of 1 to 0.3. If you fade it from 0.2 to 0.8, let’s say, it will fade in. Usually you would require to set initOp to whatever was the element’s opacity at the time you start the animation, but in general you could set it to something different, in which case the opacity of the element will sharply change to initOp the moment the animation function is called, then start its transition to finalOp.

I can’t include an example in this WordPress blog, but you can see this code in action in multiple fade animations at my homepage. [EDIT: Now I don’t use my code any more; I use the CSS3 transition like I mentioned.]

If you look at the Javascript again, you’ll see that the fade() function calls itself via the setTimeout() in the last line. The setTimeout delay has been chosen as 1/100th of the duration of your fade animation. You could also set this as a fixed number in milliseconds.  This delay does not determine the duration of the animation, only how many times fade() manages to run in that duration and the opacity value is updated. The shorter this delay, the smoother the fade animation; the longer, the choppier. It may however not always be a good idea to set it as something very small like 1 ms, say for long, slow fades, for which the fast, repeated computations for miniscule opacity changes are usually unnecessary.