When I run the following script, I intend for the first div's width and height to change until the condition is met that causes clearInterval to trigger. I then want the second div's width and height to change until the condition is met that causes clearInterval to trigger. I then want the script to end.

What's actually happening is that both divs are 'growing' at the same time and then the first div endlessly resizes...

function growDiv() {
divWidth = 0
divHeight = 0
timer = setInterval("animate('div1')",20)
timer = setInterval("animate('div2')",20)

}

function animate(div) {
divWidth += 5
divHeight += 5
S(div).width = divWidth
S(div).height = divHeight
if (divWidth == 100) {
clearInterval(timer)
divWidth = 0
divHeight = 0
}
}

growDiv is called by a button press. The way I figured this would work is that when timer 'starts' for the first time, animate() is called until the condition to terminate the loop is met. Once terminated the call to this function would end and we would return to growDiv to continue to the second timer and thus the second call to animate(div2). Once THIS then finishes we would return back to growDiv again and with no script left to process the function would end.

Can someone explain to me how this ACTUALLY works?