将一个div套进li，用链式动画设置了两者，结果了奇怪的问题……-慕课网

将一个div套进li，用链式动画设置了两者，结果了奇怪的问题……

来源：6-2 完美运动框架

zeroben

2017-09-21 15:24

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JS动画/链式动画</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      li{
        width: 200px;
        height: 100px;
        background-color: #f60;
        border: 2px solid #06f;
        opacity: 0.3;
      }
      #li3,#li4{
        display:flex;
        justify-content:center;
        align-items:center;
      }
      #one,#two{
        width: 50px;
        height: 50px;
        background-color: #0ff;
        border-radius: 50%;
        margin: auto;
      }
    </style>
    <script src="js/startMove.js"></script>
    <script src="js/startMove2.js"></script>
    <script>
      window.onload = function(){
        /*这些运动的顺序没有严格要求
         *比如onmouseover的顺序为：宽->高->透明度
         *那么onmouseout可以是：透明度->高->宽,也可以是：高->宽->透明度
         */
        //链式运动
        var li1 = document.getElementById("li1");
        li1.timer = null;
        li1.onmouseover = function(){
          startMove(li1, "height", 200, function(){
            startMove(li1, "width", 400, function(){
              startMove(li1, "opacity", 100);
            });
          });
        };
        li1.onmouseout = function(){
          startMove(li1, "opacity", 30, function(){
            startMove(li1, "width", 200, function(){
              startMove(li1, "height", 100);
            });
          });
        };
        //同步运动
        var li2 = document.getElementById("li2");
        li2.timer = null;
        li2.onmouseover = function(){
          startMove2(li2, {width:400, height:200, opacity:100});
        };
        li2.onmouseout = function(){
          startMove2(li2, {opacity:30, height:100, width:200});
        };
        //同步运动+链式运动
        var li3 = document.getElementById("li3");
        var one = document.getElementById("one");
        li3.timer = null;
        li3.onmouseover = function(){
          startMove2(li3, {width:400, height:200, opacity:100}, function(){
              startMove2(one, {width:200, height:200});
          });
        };/*
        li3.onmouseout = function(){
          startMove2(li3, {opacity:30, height:100, width:200}, function(){
              startMove2(one, {width:50, height: 50});
          });
        };*/
        //与上面那个执行顺序不同
        //点击圆时无反应
        //猜测：优先级的问题
        li3.onmouseout = function(){
          startMove2(one, {height:50, width:50}, function(){
              startMove2(li3, {opacity:30, width:200, height: 100});
          });
        };
        //链式运动+同步运动
        var li4 = document.getElementById("li4");
        li4.timer = null;
        li4.onmouseover = function(){
          startMove(li4, "height", 200, function(){
            startMove(li4, "width", 400, function(){
              startMove(li4, "opacity", 100, function(){
                startMove2(two, {width:200, height:200});
              });
            });
          });
        };/*
        li4.onmouseout = function(){
          startMove(li4, "opacity", 30, function(){
            startMove(li4, "width", 200, function(){
              startMove(li4, "height", 100, function(){
                startMove2(two, {width:50, height:50});
              });
            });
          });
        };*/
        //与上面那个执行顺序不同
        //点击圆时无反应
        li4.onmouseout = function(){
          startMove2(two, {width:50, height:50}, function(){
            startMove(li4, "opacity", 30, function(){
              startMove(li4, "width", 200, function(){
                startMove(li4, "height", 100);
              });
            });
          });
        };
      }
    </script>
  </head>

  <body>
    <ul>
      <li id="li1"></li>
      <li id="li2"></li>
      <li id="li3">
        <div id="one"></div>
      </li>
      <li id="li4">
        <div id="two"></div>
      </li>
    </ul>
  </body>
</html>

function startMove2(obj, json, func){
	//避免重复点击
	clearInterval(obj.timer);

	//计时器
	obj.timer = setInterval(function(){
	    //假设运动完成
	    var flag = true;
	    //遍历每个属性
		for(var attr in json){
			var current = 0;
			//获得当前属性的值
			//区别透明属性和宽、高等属性值
			if(attr == "opacity"){
				current = Math.round(parseFloat(getStyle(obj,attr))*100);
			}
			else {
        	    current = parseInt(getStyle(obj, attr));
    	    }

			//计算速度
			var speed = (json[attr] - current)/8;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

			//检测停止
			if(current != json[attr]){
				flag = false;
			}
			if(attr == "opacity"){
				obj.style.filter = "alpha:(opacity" + current + speed + ")";
				obj.style.opacity = (current + speed)/100;
			}
			else{
				obj.style[attr] = current + speed + "px";
			}
		}
		//检测停止
		if(flag){
			clearInterval(obj.timer);
			if(func){
				func();
			}
		}
	}, 30);
}

function getStyle(obj, attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}
	else{
		return getComputedStyle(obj, null)[attr];
	}
}

没想明白为什么li3.onmouseout设置li3套one没问题，但是one套li3就出现问题了，鼠标只要滑到圆点上就无法执行动画效果，是优先级的问题么？但是这样li3套one也应该出现相同问题才对……想不通

写回答关注