I am working doing some rudimentary animation with javascript simply animating some div elements. I am sure that there is a much more efficient way of doing things, but this is what I've got:

Code javascript:
var changeHeight = {
 
	init: function() {
 
		var elements = Core.getElementsByClass("tab");
		changeHeight.steps = 10;		//number of animation steps
		changeHeight.maxSize = 150;		//max enlargement size in pixels
		changeHeight.maxed = false;		//will be used for element enlargement
 
 
		for (var i = 0; i < elements.length; i++) {
						Core.addEventListener(elements[i],"mouseover",changeHeight.enlarge);
			Core.addEventListener(elements[i],"mouseout",changeHeight.shrink);
 
		}
	},
 
 
	enlarge: function() 
	{
 
		if (!changeHeight.curHeight)     //checking for first function evaluation
		{
			changeHeight.curHeight = parseInt(Core.getComputedStyle(this,"height"),10);
			changeHeight.startHeight = changeHeight.curHeight;
			changeHeight.elem = this;
		}
 
		if (changeHeight.curHeight < changeHeight.maxSize) 
		{
			changeHeight.step = Math.round((changeHeight.maxSize-changeHeight.curHeight)/changeHeight.steps);
			if (changeHeight.step < 1) return;
			changeHeight.curHeight += changeHeight.step;
			changeHeight.elem.style.height = changeHeight.curHeight + "px";
			setTimeout(changeHeight.enlarge,.5);
		}
	},
 
 
 
	shrink: function() {
		delete changeHeight.curHeight;
		this.style.height = changeHeight.startHeight + "px";
	}
 
 
}

and the html in question:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Java Testing</title>

<script type="text/javascript" src="scripts/core.js"></script>
<script type="text/javascript" src="scripts/element_animation.js"></script>


<style type="text/css">

.tab {
	width:100px;
	min-height:10px;
	border:1px solid black;
	background-color:#00CC00;
	margin: 10px;
	}
	
.button {
	height:30px;
	text-decoration:none;
	color:#000000;
	width:100%;
	text-align:center;
	}
	
#compare {
	height:200px;
	width:100px;
	background-color:#00CC00;
	border: 1px solid black;
	position:absolute;
	left: 150px;
	top:10px;
	}
	
</style>

</head>

<body>

<div id="poop">

	<div class="tab">
		<a href="#" class="button">Click Me</a>
	</div>
	<div class="tab">
		<a href="#" class="button">Click Me</a>
	</div>
	<div id="compare">
	
	</div>

</div>

</body>
</html>
Hovering over each div element works just like it's supposed to. However, when i go from hovering over the div to hovering over the link, the animation resets and starts again. Basically it expands the element twice (not twice as long, just original to expanded and then original to expanded again). This also happens when i move the mouse off the link, I imagine because some small part of the margin or padding makes it hover over the div again. Anyway, why is it activating twice and how do I stop it??