Fade in Fade out too slow!

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:

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?

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

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.

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.

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.