为了账号安全,请及时绑定邮箱和手机立即绑定

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

<!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)。大神帮忙解答一下。。。。

正在回答

1 回答

第20行,if(iTarget == speed) 

这里括号里应该是icur == iTarget才对。

1 回复 有任何疑惑可以回复我~
#1

fly狂奔的蜗牛 提问者

大神!多谢了...
2017-09-19 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信