解决多属性链式动画无法执行到clearInterval问题

本文链接：https://blog.csdn.net/need_just_word/article/details/79032185

先直接上代码，有空再详解

/**
 * move.js
 * Created by Calf on 2018/1/10.
 */
var startMove = function(obj,json,fn){
    clearInterval(obj.timer);

    var flags = []; //是否完成的标志，true为完成
    for(var i = 0; i < getJsonLength(json);i++){
        flags[i] = false;
    }
    var iCur;
    //设置定时器
    obj.timer = setInterval(function() {
        var i = 0;
        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]) {
                flags[i] = true;
                //本来应该在这里设置变化速度为零，用一个数组保存各个attr的speed，但是当成达到目标时speed都会为零，故不用设置
            }
            //移动
            if (attr == 'opacity') {
                obj.style['filter'] = 'alpha(opacity:' + iCur + speed + ')';
                obj.style[attr] = (iCur + speed) / 100;
            } else {
                obj.style[attr] = iCur + speed + 'px';
            }
            i++;
        }
        i = 0;

        //以下为判断是否全部完成
        var totalFlag = true; //全部属性是否变化完成的标志
        for(var j = 0; j < flags.length; j++){
            if(flags[i] == false){
                totalFlag = false;
            }
        }
        if(totalFlag){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },20);
}
var getStyle = function(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else {
        return getComputedStyle(obj,false)[attr];
    }
}

function getJsonLength(json){
    var l = 0;
    for(j in json){
        l++;
    }
    return l;
}

<!--动画.html-->
<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    li{
        margin:20px;
        width:200px;
        height: 100px;
        background-color: red;
        list-style: none;
    }
</style>
<script src="move.js"></script>
<script>
    window.onload = function() {
        ali = document.getElementById('aa');
        ali.timer = null;
        ali.onmouseover = function () {
            startMove(ali,{width : 400,height : 200,opacity:50},function(){
                startMove(ali,{width:800});
            });
        };
        ali.onmouseout = function () {
            startMove(ali,{width : 200,height : 100,opacity:100});
        };
    }

</script>
</head>
<body>
    <ul>
        <li id="aa"></li>
    </ul>
</body>
</html>