单个div动画效果能出来，但鼠标拖到其他div上之后就有bug了，求大神
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
float: left;
margin-left: 30px;
height: 100px;
background: red;
opacity: 0.3;
filter:alpha(opacity:30);
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<script>
window.onload=function(){
var box = document.getElementsByTagName("div");
for(var i=0;i<box.length;i++){
var timer = null,
opacity = 30;
box[i].opacity = 30;
box[i].onmouseover = function(){
boxChang(this,100);
}
box[i].onmouseout = function(){
boxChang(this,30);
}
box[i].timer=null;
}
function boxChang(obj,iTarget){
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(opacity>iTarget){
speed= -10;
}else{
speed= 10;
}
if(iTarget==opacity){
clearInterval(timer);
}else{
opacity += speed;
obj.style.filter = 'alpha(opacity'+opacity+')';
obj.style.opacity = opacity/100;
}
},30)
}
}
</script>
</body>
</html>
