Simplest Javascript Fade Animation

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


function fade(eid, initOp, finalOp, TimeToFade, time)
	if (initOp==0)
	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))
		if (finalOp==0)
	setTimeout("fade( '" + eid + "'," + initOp + "," + finalOp + "," + TimeToFade + "," + time + ")", TimeToFade/100);


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

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.

5 thoughts on “Simplest Javascript Fade Animation

  1. It’s great! :)

    I tried it, but never thought of this. JavaScript has no static function declarations, like C, so I kinda screwed the setTimeout callback. And then I moved the jQuery! :P

  2. hi i tried to use this code on my website, but it doesn’t seem to work. do i have to change eid to my own id? and im putting an image as the child element for the div, does that affect anything? thanks, please help!

    • Hi yezi, the answer is just what SlappyBag said. Putting an image (or whatever else, for the matter) as a child element of the div you want to fade should not affect anything.

  3. Hi Yezi, by the looks of it the EID parameter has to be the ID of the div/element you want to fade.

    E.g. he has used a div with an id of “box” so has passed through “box” as the eid.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s