Animated slide in effect

[Stickybomb]

I am attempting to write a script that when you mouse over an image, a div containing the title of it or what not will slide out from the top of the image.

 

my problem is that i have not had much luck with delays and timers, and can not seem to find any descent tutorials to my liking.

 

here is what i have so far

 

//css//
<style>
#img1_ {
position:absolute;
left:797px;
top:250px;
width:115px;
height:112px;
z-index:3;
}
#img1-head {
position:absolute;
left:800px;
top:260px;/*210px*/
width:100px;
z-index:2;
color: #FE5F10;
text-align:center;
font-size: 14px;
font-family: Optima, Times, Courier;
font-weight: bold;
line-height: 15px;
}
#img2_ {
position:absolute;
left:620px;
top:539px;
width:112px;
height:152px;
z-index:3;
}
#img2-head {
position:absolute;
left:625px;
top:550px;/*500px*/
width:100px;
z-index:2;
color: #FE5F10;
text-align:center;
font-size: 14px;
font-family: Optima, Times, Courier;
font-weight: bold;
line-height: 15px;
}
#img3_ {
position:absolute;
left:451px;
top:587px;
width:112px;
height:152px;
z-index:3;
}
#img3-head {
position:absolute;
left:460px;
top:600px;/*550px*/
width:100px;
z-index:2;
color: #FE5F10;
text-align:center;
font-size: 14px;
font-family: Optima, Times, Courier;
font-weight: bold;
line-height: 15px;
}
#img4_ {
position:absolute;
left:284px;
top:625px;
width:112px;
height:152px;
z-index:3;
}
#img4-head {
position:absolute;
left:290px;
top:635px;/*585px*/
width:100px;
z-index:2;
color: #FE5F10;
text-align:center;
font-size: 14px;
font-family: Optima, Times, Courier;
font-weight: bold;
line-height: 15px;
}
#img5_ {
position:absolute;
left:111px;
top:648px;
width:113px;
height:153px;
z-index:3;
}
#img5-head {
position:absolute;
left:116px;
top:650px;/*600px*/
width:100px;
z-index:2;
color: #FE5F10;
text-align:center;
font-size: 14px;
font-family: Optima, Times, Courier;
font-weight: bold;
line-height: 15px;
}
#img6_ { 
position:absolute;
left:785px;
top:402px;
width:122px;
height:122px;
z-index:3;
}
#img6-head  { 
position:absolute;
left:795px;
top:480px;/*530px*/
width:100px;
z-index:2;
color: #FE5F10;
text-align:center;
font-size: 14px;
font-family: Optima, Times, Courier;
font-weight: bold;
line-height: 15px;
}
</style>

//javascrpt//
<script>

function delay(millis)
{
var date = new Date();
var curDate = null;

do { curDate = new Date(); }
while(curDate-date < millis);
} 

function animate(startTimer,moveTimer,moveSpeed){

	delay(startTimer);
	for(var i = 0; i= move; i++){
		delay(moveTimer);
		title = title + moveSpeed;
	}

}
function TitleShow(get){

var id = get + '-head';
	var title = document.getElementById(id).style.top;
	var move = 50;
	var inc = 2;
	var timer = 50;
	var delay = 5;

	animate(timer.delay,inc);

}

function TitleHide(get){

var id = get + '-head';
	var title = document.getElementById(id).style.top;
	var move = 50;
	var inc = -2;
	var timer = 50;
	var delay = 5;

	animate(timer.delay,inc);

}

</script>

//title div//
<div id="img1-head">image 1</div>
<div id="img2-head">image 2</div>
<div id="img3-head">image 3</div>
<div id="img4-head">image 4</div>
<div id="img5-head">image 5</div>
<div id="img6-head">image 6</div>

//image divs//
<div id="img1_">
<img id="img1" src="images/1.png" width="115" height="112" alt="" onmouseover="TitleShow(this)" onmouseout="TitleHide(this)" />
</div>

<div id="img2_">
<img id="img2" src="images/2.png" width="122" height="122" alt="" onmouseover="TitleHide(this)" onmouseout="TitleShow(this)" />
</div>

<div id="img3_">
<img id="img3" src="images/3.gif" width="112" height="152" alt="" onmouseover="TitleShow(this)" onmouseout="TitleHide(this)" />
</div>

<div id="img4_">
<img id="img4" src="images/4.gif" width="112" height="152" alt="" onmouseover="TitleShow(this)" onmouseout="TitleHide(this)" />
</div>

<div id="img5_">
<img id="img5" src="images/5.gif" width="112" height="152" alt="" onmouseover="TitleShow(this)" onmouseout="TitleHide(this)" />
</div>

<div id="img6_">
<img id="img6" src="images/6.gif" width="113" height="153" alt="" onmouseover="TitleShow(this)" onmouseout="TitleHide(this)" />
</div>

 

any help with this would be greatly appriciated

 

Thanks

 

-Sticky-