<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#box{ 200px;height: 200px;background-color: #f00;filter:alpha(opacity=30); opacity:0.3;}
</style>
<script>
window.onload = function(){
var timer =null,
oBox = document.getElementById('box'),
alpha =30;
oBox.onmouseover=function(){
move(100);
}
oBox.onmouseout=function(){
move(30);
}
function move(target){
clearInterval(timer);
timer = setInterval(function(){
var speed =0;
if(alpha>target){
speed=-5;
}else{
speed=5;
};
if(alpha==target){
clearInterval(timer);
}else{
alpha+=speed;
oBox.style.filter = 'alpha(opacity='+alpha+')';
oBox.style.opacity = alpha/100;
};
},30)
}
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>