用运动框架应用链式运动出现的错误
function start(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var attr in json){
//取当前值
if(attr=='opacity'){
iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
iCur=parseInt(getStyle(obj,attr));
}
//算速度
var speed=(json[attr]-iCur)/8;
speed= speed>0 ? Math.ceil(speed) : Math.floor(speed);
//检测停止
if(iCur!=json[attr]) {
flag = false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
obj.style.opacity=(iCur+speed)/100;
}else{
obj.style[attr]=iCur+speed+'px';
}
}
if(flag==true){
clearInterval(obj.timer);
}
if(fn){
fn();
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链式运动</title>
<style>
*{margin: 0;padding: 0}
ul,li{list-style: none;}
ul li{position:absolute;left:0px;width: 200px;height:100px;background: yellow;margin-bottom: 20px;border: 3px solid #1e90ff;filter: alpha(opacity:30);opacity: .3;}
</style>
<script src="animation.js"></script>
<script>
window.onload=function(){
var li=document.getElementById('li');
li.onmouseover=function(){
start(li,{left:100},function(){
start(li,{width:400},function(){
start(li,{height:200},function(){
start(li,{opacity:100})
})
})
})
};
li.onmouseout=function(){
start(li,{opacity:30},function(){
start(li,{height:100},function(){
start(li,{width:200},function(){
start(li,{left:0})
})
})
})
};
}
</script>
</head>
<body>
<ul>
<li id="li"></li>
</ul>
</body>
</html>
代码如上，出现的问题是每次移入鼠标长宽都会增加一点，但透明度会到达1，然后移开之后，透明度只会恢复到0.9左右，然后再次移入鼠标，长宽又会增加一点。
