<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 30px;
background: red;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
var timer=null;
var iSpeed=0;
oDiv.onmouseover=function(){
startMove(300);
}
oDiv.onmouseout=function(){
startMove(30);
}
function startMove(iTarget){
clearInterval(timer);
timer=setInterval(function(){
iSpeed+=(iTarget-oDiv.offsetHeight)/6;
iSpeed*=0.75;
if(Math.abs(iSpeed)<=1&&Math.abs(iTarget-oDiv.offsetHeight)<=1){
clearInterval(timer);
iSpeed=0;
oDiv.style.height=iTarget+"px";
}else{
var H=oDiv.offsetHeight+iSpeed;
if(H<0){
H=0;
}
oDiv.style.height=H+"px";
}
},30)
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
