I have just started to learn javascript and I decided that I wanted to create an animated drop-down list with it in order to learn more, however there is a problem I cant seem to resolve. Sometimes, if I try to animate the height on a part of the page that is already being animated at the time the finishing height is undesirable.
Here is the code for animation:
Code:
function AniHeight(ElId,duration,endHeight)
{
	"use strict";
	this.id = ElId;
	this.steps = duration / 25;
	this.heightDifference = endHeight - document.getElementById(this.id).offsetHeight;
	this.addHeight = this.heightDifference / this.steps;
	this.incrementHeight = function()
	{
		if(this.steps > 0)
		{
			document.getElementById(this.id).style.height = (document.getElementById(this.id).offsetHeight + this.addHeight) + 'px';
			
			this.steps -= 1;
		}
	};
	this.resetAnimation = function(desiredHeight,length)
	{
		this.steps = length / 25;
		this.heightDifference = desiredHeight - document.getElementById(this.id).offsetHeight;
		this.addHeight = this.heightDifference / this.steps;
	};
}

var heightObjects =[];

function animateHeight(ElId,endHeight,duration)
{
	var objectExists = false;
	for(var i = 0; i < heightObjects.length ; i+= 1)
	{
		if (heightObjects[i].id === ElId)
		{
			heightObjects[i].resetAnimation(endHeight,duration);
			objectExists = true;
		}
	}
	if(objectExists === false)
	{
		heightObjects.push( new AniHeight(ElId,duration,endHeight) );
	}
}

setInterval(function(){
	"use strict";
	if(heightObjects.indexOf(1))
	{
		for(var i = 0; i < heightObjects.length; i +=1)
		{
			
			heightObjects[i].incrementHeight();
		}
	}
},25);
Here is the html for the page I am trying to animate:

Code:
<html>
<head>
	<title>Javascript testing page</title>
</head>

<body align="center">
	<h1> output</h1>
	<p id = "output"></p>
	<div style = "height:300px;
				  width:300px;
				  background-color:red;
				  position:fixed;
				  top:0;" id = "redbox" onmouseover="animateHeight('redbox',300,1000)" onmouseout="animateHeight('redbox',100,1000)"></div>
	<script src="javascript.js"></script>
</body>


</html>