用运动框架应用链式运动出现的错误-慕课网

用运动框架应用链式运动出现的错误

来源：7-1 JS动画案例

WE2008311

2016-08-06 09:54

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左右，然后再次移入鼠标，长宽又会增加一点。

写回答关注

1回答

默小灰

2016-08-06 15:18:56

已采纳

var flag=true;这个要在for循环里面；
在下面再定义一个变量var iCur = 0；你的这个还没定义；
你的
if(fn){
fn();
}
这个要在if(flag){}这个判断里面

1 0

WE2008...

我觉得 var flag=true不能在for循环里面，因为在for里面几个参数就是分开使用flag了，这样下面的判断就会出现问题，放在for上面的话，就是几个参数公用一个flag，一个不成立都不行。我后来自己解决了，并不是这个的问题

2016-08-07 09:08:39

共 1 条回复 >

JS动画效果

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

113931 学习 · 1443 问题

查看课程

相似问题

完美运动框架，不能实现链式运动哇！

回答 8

运动框架实现思路

回答 3

运动框架问题

回答 1

jquery运动框架哪里错了，求指出

回答 3

js运动框架代码

回答 2

打开慕课网App查看更多内容