为啥我频繁移动鼠标后，立即移出，宽度成这样了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画效果</title>
<link rel="stylesheet" href="../css/animation2.css">
<script src="../js/animation2.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
ul>li {
width: 200px;
height: 100px;
background-color: yellow;
margin-top: 20px;
border: 4px solid #000;
}
</style>
<script>
window.onload = function() {
var oLi = document.getElementsByTagName("li");
for (var i = 0; i < oLi.length; i++) {
oLi[i].timer = null;
oLi[i].onmouseover = function() {
startMove(this, 400);
}
oLi[i].onmouseout = function() {
startMove(this, 200)
}
}
}
function startMove(obj, iTarget) {
clearInterval(obj.timer);
var icur = parseInt(getStyle(obj, 'width'));
var speed = (iTarget - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
obj.timer = setInterval(function() {
icur = parseInt(getStyle(obj, 'width'));
if (icur == iTarget) {
clearInterval(obj.timer);
} else {
obj.style.width = icur + speed + "px";
console.log(obj.timer, iTarget, icur, speed, obj.style.width)
}
}, 30);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]; //获取当前元素使用的CSS属性值（添加过border之后的值），obj.style获取的是内联样式值
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
