Fade in Fade out too slow!

JavaScript
1

I have a div that is invisible all the time, and when one popup is activated, that div will fade in to darken the website background, like this:

702×278 42.3 KB

and i’m using the following code when the darkness appears:

function raiseOpacity(obj,counter) {
	obj.style.opacity = counter/100;
	counter +=2; //Raise 2% each time
	if(counter < 100) setTimeout(function() {raiseOpacity(obj,counter)},10); //Repeat the incrementation again
}

raiseOpacity(document.getelementbyid('example'),0); //Just an example of how the function is called.

But it is too slow, the browser hangs alot while doing this. Is there a faster way to do this fade in stuff? I’ve seen alot of websites that do this and the browsers is fast, but i couldn’t extract the code from them.

Any sugestions?

2

I tried that, and it doesnt run smoothly as the other websites. There must be another trick for this.

3

Yes, i tried to understand how they fade, but i dont get their code. I would like to be able to do my own fade, my point here is to learn.

4

Perhaps let your code repeat each 100 milisecond instead of 10.
Or raise the amount in your counter?
Try until you have a sufficient number that runs ok in the browser.

5

The websites you are talking about usually use javascript libraries such as jQuery (http://jquery.com), scriptaculous (http://script.aculo.us) …etc

These libraries do the animations for you, and allow you to easier manipulate your DOM.
I suggest you use one of these because it will make your life much easier.