只能实现单独的动画效果，链式动画不能够执行。
<!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)。大神帮忙解答一下。。。。
