<!DOCTYPE html>
<html>
<head>
<title>链式动画</title>
<style type="text/css">
div{
background: yellow;
border:2px solid red;
width: 120px;
height: 50px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
window.onload = function(){
var div1 =document.getElementsByTagName('div');
for(i=0;i<div1.length;i++){
div1[i].timer = null;
div1[i].onmouseover = function(){
var that = this;
start(this,480,'width',function(){
start(that,150,'height');
});
}
div1[i].onmouseout = function(){
var that = this;
start(this,120,'width',function(){
start(that,50,'height');
});
}
}
}
//fn = function(){start(...,...,...)}
function start(obj,itarget,attr,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if (offattr!= itarget) {
var offattr = parseInt(getStyle(obj,attr));
speed = (itarget - offattr)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
obj.style[attr] = offattr + speed +'px';
}
else{
clearInterval(obj.timer);
if (fn) {
fn;
}
}
},30)
}
function getStyle(obj,attr){
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</body>
</html>
如上代码只能改变宽度，高度无法改变，请问是什么原因？
fn()改了 还是没用