單個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>
2016-06-17
首先 ? 將for循環中的“?var timer = null,”刪除。因為（1） ?timer在使用?“box[i].timer=null;”之后，timer變成了自定義屬性，不是變量，不要用var定義。（2） 語句結束用" ; "結尾。
?其次 ?將函數function boxChang(obj,iTarget)中的每一個timer 、opacity前面加上“ obj. ”,?但是“obj.style.filter = 'alpha(opacity'+opacity+')';”中只需在最后一個"opacity"加" obj. "。