                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

链式动画的第三级动画没执行？追踪了下代码，发现传入的fn值是undefined?各位大神可以帮忙看一下这个问题吗？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript动画学习--链式动画的实现</title>
<style>
body,div {margin: 0;padding:0;}
.box {
width: 200px;
height: 200px;
line-height: 200px;
background-color: indianred;
border-radius: 5px;
box-shadow: 0 1px 1px indianred;
text-align: center;
color: #fff;
font-size: 20px;
opacity: 0.3;
filter: alpha(opacity:30);
}
</style>

</head>
<body>

<div class="box">链式动画</div>
<script>
window.onload = function() {
var oBox = document.getElementsByClassName('box')[0];
oBox.onmouseover = function() {
var g = this;
changeSize(g,100,'opacity',function(){
changeSize(g,400,'width',function(){
changeSize(g,300,'height')
})
})
};
oBox.onmouseout=function(){
var g = this;
changeSize(g,200,'height',function(){
changeSize(g,200,'width',function(){
changeSize(g,30,'opacity')
})
})
};
/*
* 获取非行间样式
*@param iTarget 动画的有效范围
* @param attr 改变的属性
*/
function getStyle(obj,attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj,false)[attr];
}
//return obj.currentStyle || getComputedStyle(obj,false)[attr];
}
/*
* 动画
* @param obj 需要实现动画的元素
* @param iTarget 动画的有效范围
* @param attr 改变的属性
* @param fn 实现链式动画
*/
function changeSize(obj,iTarget,attr,fn) {
clearInterval(obj.timer);
//obj.timer : 在多物体运动时，每个物体使用独立的定时器
obj.timer = setInterval(function() {
obj.curStyle = 0;
if (attr == 'opacity') {
obj.curStyle = Math.round(parseFloat(getStyle(obj,attr))*100);
} else {
obj.curStyle = parseInt(getStyle(obj,attr));
}
obj.iSpeed = (iTarget - obj.curStyle)/8;
obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);
if (obj.curStyle == iTarget) {
clearInterval(obj.timer);
//链式动画：当上一个动画结束后，开始该动画
if (fn) {
fn()
}
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:'+ (obj.curStyle + obj.iSpeed)*100 +')';
obj.style.opacity = (obj.curStyle + obj.iSpeed)/100;
} else {
obj.style[attr] = obj.curStyle + obj.iSpeed + 'px';
}

}
},30);
}
};

</script>
</body>
</html>