Fading Images In And Out With A Loop - Out Of Memory

I'm designing a page to fade multiple images (three) in and out over a set period of time (one minute, say). The code I have works as follows:

I define an array and fill it with the div objects I want to fade in and out. I have some simple tags (2 for opaque, 1 for fading in, -1 for fading out, etc.) that I set to show the state of the object.

First I check if the object is opaque, and if so set it to fade along with a time;

Or if it's transparent I give it a 1 in 10 chance of fading in during this iteration. If it's currently fading in or out I check to make sure it's on track and change the opacity of the div accordingly.

Originally, I had the function call back to itself using setTimeout after the loop had gone through all the divs and changed their opacities appropriately. This caused an out of memory error (though, strangely, if I had any alerts in the function it didn't give me the error).

So the version below has the code in a while loop to let it run for 20 seconds - this gives me the "a script...run slowly, do you want to continue the script?" message.

So I have several questions:

1) First and foremost, why is my function causing out of memory/run slowly errors and what is the best way to fix that?

2) Is there a better way to code this effect (final result will be six lights fading in and out for a minute or so).

3)I'm not an experienced programmer, so any bad practices, ways to streamline, no no's, etc. that you see, please point out.

I've only posted the script here - the page simple consists of three divs (id's grad0, grad1, grad2) and a call to the function copied here.