将一个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也应该出现相同问题才对……想不通
