我就纳闷了。按代码所示。flag放在定时器外面，最开始是true，执行第一次动画时，不是所有动画都到达，于是定时器的flag被设置为false，然后该干嘛就干嘛，接下来执行30毫秒后的第二次动画，于是乎，问题来了，作为startmove内的变量，定时器外的变量flag，已经被上一次的动画设置为了false，所以，接下来的判断语句flag永远是false， 等同于if（flag）这个是不可能实现的！！定时器内部也没有设置flag为true的语句，动画讲永远不停止！！真正的问题来了：屏幕中老师这样敲的代码，浏览器中居然能实现动画！！！求大神解释！！
2016-04-21
把flag初始为0；当有一个属性达到目标值时，flag自增1；当flag 等于 json的长度时再清楚定时器；
代码如下：
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = 0;
for(var attr in json){
//1.取当前值
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
//是不是不需要parseFloat
}else{
icur = parseInt(getStyle(obj,attr));
}
//2.算速度
var speed = (json[attr] - icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur == json[attr]){
flag++;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';//针对IE
obj.style.opacity = (icur + speed)/100;
//针对chrome、FF
}else{
obj.style[attr] = icur + speed + 'px';
}
if(flag == json.length){
clearInterval(obj.timer);
if(fn){
fn();
}
}
};
},20)
}
举报
