                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

將一個div套進li，用鏈式動畫設置了兩者，結果了奇怪的問題……

<!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也應該出現相同問題才對……想不通