Moving DIVs with Javascript

[brechtjah]

I'm trying to create a website navigation with moving images. However, I seem to have a bit problems with it as it bugs out sometimes.

This is my code:

<script type="text/javascript"></script>
                        var goDownH = 300;
			var goUpH = 320;
			
			function goDown(id) {
					if(goDownH < 320) {
						goDownH = goDownH + 1;
						
						document.getElementById(id).style.marginTop = goDownH + "px";
						setTimeout("goDown('"+id+"');", 10);
					}
					else {
						goDownH = 300;
					}
			}
			
			
			function goUp(id) {
					if(goUpH > 300) {
						goUpH = goUpH - 1;
						
						document.getElementById(id).style.marginTop = goUpH + "px";
						setTimeout("goUp('"+id+"');", 10);
					}
					else {
						goUpH = 320;
					}
			}
		</script>

<div id="divNav1" style="position: absolute; margin: 300px 0px 0px 400px;">
			<img src="nav.png" alt="nav" onMouseOver="javascript:goDown('divNav1')" onMouseOut="javascript:goUp('divNav1')">
		</div>
		<div id="divNav2" style="position: absolute; margin: 300px 0px 0px 520px;">
			<img src="nav.png" alt="nav" onMouseOver="javascript:goDown('divNav2')" onMouseOut="javascript:goUp('divNav2')">
		</div>

The code above becomes a problem when I'm moving like crazy with the mouse. Sometimes some DIVs get stuck or they start going up and down really fast.
I don't understand what the problem is so I can't start fixing it.

Brecht

[Luckychap]

Use YUI Animation Lib: http://developer.yahoo.com/yui/examples/animation/index.html