<!--HTML-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义运动框架08-链式运动(函数传参)</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
ul li{
width: 200px;
height: 100px;
background: #FF7F50;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="js/starMove.js"></script>
<script type="text/javascript">
window.onload=function(){
var oli=document.getElementById("li1");
oli.onmouseover=function(){
starMove(oli,{width:400},function(){
starMove(oli,{height:200},function(){
starMove(oli,{opacity:30})
});
});
};
oli.onmouseout=function(){
starMove(oli,"opacity",100,function(){
starMove(oli,"height",100,function(){
starMove(oli,"width",200)
});
});
};
};
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
<!--JS-->
/*框架*/
function starMove(obj,json,fn){
var flag=true;//假设所有对象都到达了目标值
clearInterval(obj.timer);//清除定时器
obj.timer=setInterval(function(){
for(var attr in json){
//兼容判断
var icur=0;
if (attr=="opacity") {
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
//parseInt(getStyle(obj,attr));
} else{
icur=parseInt(getStyle(obj,attr));
};
//var icur=parseInt(getStyle(obj,attr));//此处不兼容透明度
var t=20;
var speed=(json[attr]-icur)/t;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (icur!=json[attr]) {
flag=false;
};
//clearInterval(obj.timer);
//if(fn){fn();};
//} else{
//执行判断：处理单位不兼容透明度问题
if (attr=="opacity") {
obj.style.filter="alpha(opacity:"+(icur+speed)+")";//IE
obj.style.opacity=(icur+speed)/100;
} else{
obj.style[attr]=icur+speed+"px";//单位不兼容透明度
};
//};
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
};
};
};
},30);
};if (icur != json[attr]) {
flag = false;
}else {
flag = true;
}改成这样吧，小白好理解一点。
顺便说下，你的那个鼠标移除的函数调用的传参有点问题，应该改成下面这样：
oli.onmouseout=function(){
starMove(oli,{opacity:100},function(){
starMove(oli,{height:100},function(){
starMove(oli,{width:200})
});
});
};老师写的那个运动框架中判断运动停止的那句语句有问题：
if (icur!=json[attr]) {
flag=false;
};你把它改成下面这样就可以了：
flag = icur == json[attr] || false ;
由于javascript是从上到下执行的，老师写的那个判断是指：如果属性没有执行完成，那么就将flag设置为false，
可是当所有的属性执行完成后又没有将flag的值重置为true；
可是那个回调函数（链式运动）的判断条件是flag为true，所以链式运动无法执行。而重新将移入鼠标后，flag被设置为true了，而属性已经完成，没有被设置为false，所以就执行链式运动了。