                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

鏈?zhǔn)絼?dòng)畫的第三級(jí)動(dòng)畫沒執(zhí)行？追蹤了下代碼，發(fā)現(xiàn)傳入的fn值是undefined?各位大神可以幫忙看一下這個(gè)問題嗎？

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>JavaScript動(dòng)畫學(xué)習(xí)--鏈?zhǔn)絼?dòng)畫的實(shí)現(xiàn)</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">鏈?zhǔn)絼?dòng)畫</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 動(dòng)畫的有效范圍
? ? ? ? * @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];
}
/*
? ? ? ? * 動(dòng)畫
? ? ? ? * @param obj 需要實(shí)現(xiàn)動(dòng)畫的元素
? ? ? ? * @param iTarget 動(dòng)畫的有效范圍
? ? ? ? * @param attr 改變的屬性
? ? ? ? * @param fn 實(shí)現(xiàn)鏈?zhǔn)絼?dòng)畫
? ? ? ? */
function changeSize(obj,iTarget,attr,fn) {
clearInterval(obj.timer);
? ? ? ? ? ?//obj.timer : 在多物體運(yùn)動(dòng)時(shí)，每個(gè)物體使用獨(dú)立的定時(shí)器
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);
? ? ? ? ? ? ? ? ? ?//鏈?zhǔn)絼?dòng)畫：當(dāng)上一個(gè)動(dòng)畫結(jié)束后，開始該動(dòng)畫
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>