只能实现单独的动画效果，链式动画不能够执行。-慕课网

只能实现单独的动画效果，链式动画不能够执行。

来源：5-1 JS链式动画

fly狂奔的蜗牛

2017-09-18 16:49

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>完美动画</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#li1{
				width: 400px;
				height: 100px;
				background: green;
				border: 2px solid blue;
				opacity: 0.3;				
			}
		</style>
		<script src="js/move.js"></script>
		<script type="text/javascript">
			window.onload=function(){
				var aLi=document.getElementById('li1');
				aLi.timmer=null;
				aLi.onmouseover=function(){
					startMove(aLi,'height',200,function(){
						alert(1);
					});
				}
			}
		</script>
	</head>
	<body>
		<ul>
			<li id="li1"></li>
		</ul>
	</body>
</html>

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

function startMove(obj, attr, iTarget, fn) {
	clearInterval(obj.timmer);
	obj.timmer = setInterval(function() {
		var icur = 0;
		if(attr == 'opacity') {
			icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
		} else {
			icur = parseInt(getStyle(obj, attr));
		}
		var speed = (iTarget - icur) / 8;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if(iTarget == speed) {
			clearInterval(obj.timmer);
			if(fn) {
				fn();
			}
		} else {
			if(attr == 'opacity') {
				obj.style.opacity = (icur + speed) / 100;
			} else {
				obj.style[attr] = (icur + speed) + 'px';
			}
		}
	}, 30);
}

鼠标移动到Li上面以后，宽度能够顺利的改变，换成透明度，高度等也能够执行。但是不能够执行链式动画，比如那个alert(1)。大神帮忙解答一下。。。。

写回答关注