hiaia
今天的风儿有点喧嚣
采纳率71.4%
2016-09-02 08:37

js 涉及闭包中变量引用的bug,找不到原因。

1
已采纳

代码如下,不知道为什么不会执行改变高度和透明度的动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{ height: 200px; width: 200px; position: absolute; background: #999; left: 10px; top:0px; opacity: .8; filter: alpha(opacity:80);}
        button{ position: relative;  top:300px; }
    </style>
</head>
<body>
    <div id="box"></div>
    <button type="button">移动</button>

    <script type="text/javascript">
        window.onload=function(){
            function getStyle(obj,className){
                var val=(obj.currentStyle? obj.currentStyle[className]:getComputedStyle(obj,false)[className]);
                if(className=="opacity"){
                    val=Math.round(parseFloat(val)*100);
                }
                return parseInt(val);
            }
            /*-----move函数--------*/
             move=function(obj,json_move,move_time){
                clearInterval(obj.timer);
                if(!obj.arr){
                    obj.arr=[];
                }
                function add(){
                    if(arguments.length>0){
                        obj.arr.push(arguments);
                    }
                    return add;
                }
                var time=null;
                var selt={
                    "fast":600,
                    "normal":800,
                    "slow":2200
                }
                switch (typeof move_time){
                    case "string":
                        if(selt.hasOwnProperty(move_time)){
                            time=selt[move_time];
                        }else{
                            time=selt[normal];
                        };
                        break;
                    case "number":
                        time=move_time;
                        break;
                    default:
                        time=selt[normal];
                        break;
                }
                var n=0;
                var count=parseInt(time/30);
                var start={};
                var dis={};
                for(var key in json_move){
                    start[key]=getStyle(obj,key);
                    dis[key]=json_move[key]-start[key];
                }
                obj.timer=setInterval(function(){
                    n++;
                    for(var key in json_move){
                        if(key=="opacity"){
                            obj.style.opacity=(start[key]+dis[key]/count*n)/100;
                            obj.style.filter="alpha(opacity:"+start[key]+dis[key]/count*n+")";
                        }else{
                            obj.style[key]=start[key]+dis[key]/count*n+"px";
                        }
                        if(n==count){
                            clearInterval(obj.timer);
                            if(obj.arr.length!=0){
                                console.log("----------------");
                                console.log(obj.arr);
                                var temp=obj.arr.shift();
                                console.log(temp);
                                console.log(obj.arr);
                                console.log("-----------------");
                                move(obj,temp[0],temp[1]);
                            }
                        }
                    }
                },30);
                return add;
            }

            /*-----------------------*/

            /*----------------------*/
            var m_div=document.getElementById("box");
            var m_btn=document.getElementsByTagName("button")[0];
            m_btn.onclick=function(){
                move(m_div,{"left":300},1000)({"width":400},1000)({"top":400, "opacity":50},2000)({"height":0,"opacity":80},1000);
            }
        }
    </script>
</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • showbo GoCityPass新加坡曼谷通票 5年前
    
                    obj.timer = setInterval(function () {
                        n++;
                        for (var key in json_move) {
                            if (key == "opacity") {
                                obj.style.opacity = (start[key] + dis[key] / count * n) / 100;
                                obj.style.filter = "alpha(opacity:" + start[key] + dis[key] / count * n + ")";
                            } else {
                                obj.style[key] = start[key] + dis[key] / count * n + "px";
                            }
                        }
                        //放出来,放里面因为你上一次操作有2个属性要设置,会导致执行2次这个代码
                        //第一次执行设置top属性时已经更新了最后一个动作的timer句柄,第二次for设置opacity属性时这个代码直接干掉了新启动的timer
                        if (n == count) {
                            clearInterval(obj.timer);///
                            if (obj.arr.length != 0) {
    
                                console.log("----------------");
                                console.log(obj.arr);
                                var temp = obj.arr.shift();
                                console.log(temp);
                                console.log(obj.arr);
                                console.log("-----------------");
                                move(obj, temp[0], temp[1]);
                            }
                        }
                        /////////////////////////////////
                    }, 30);
    
    点赞 评论 复制链接分享
  • testcs_dn 微wx笑 5年前

    动画自己写?为什么不用JQuery?

    点赞 评论 复制链接分享