                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

为何老是在闪，opacity一直在0.3和0.4之间来回跳

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>share</title>
		<style>
			body,div,span{
				margin: 0;
				padding: 0;
			}
			#div1{
				width: 200px;
				height: 200px;
				background: red;				
				filter: alpha(opacity:30);				
				opacity: 0.3;
			}
		</style>
		<script>
			window.onload=function(){
				var oDiv=document.getElementById("div1");
				oDiv.onmouseover=function(){
					startChange(100);
				}
				oDiv.onmouseout=function(){
					startChange(30);
				}
			}
			var timer=null;
			var alpha=30;
			
			function startChange(iTarget){				
				var oDiv=document.getElementById("div1");
				clearInterval(timer);
				timer=setInterval(function(){
					var speed=0;
					if(alpha>30){
						speed=-10;
					}else{
						speed=10;
					}
					if(alpha==iTarget){						
						clearInterval(timer);
					}else{
						alpha=alpha+speed;
						oDiv.style.filter="alpha(opacity:"+alpha+")";
						oDiv.style.opacity=alpha/100;
					}
				},30);
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>