html鼠标移走div慢慢消失,javascript中 鼠标移入实现div变小，可div变小过程中鼠标已经不在div上...

常见的效果是鼠标移入某个对象上放大，移出时回到原来大小。这个demo希望实现的结果是移入时缩小，移出时放大。但这样就总是会出现闪现的效果。鼠标移出时变大，但变大却使得原来位置的鼠标变成了移入。所以当鼠标快速重复移入移出操作时，看到的效果会很奇怪。拜托高手帮我看一下怎样解决这个问题，非常感谢！

#div1{width: 300px;height: 300px;background-color: red;}

var div1=document.getElementById('div1');

var timer=null;

div1.οnmοuseοver=function(){

move(this,{width:100,height:100},10);

}

div1.οnmοuseοut=function(){

move(this,{width:300,height:300},10);

}

/*--------------------单一物体多属性匀速运动框架-------------------------*/

function move(obj,json,speed){

clearInterval(timer);

changeValue=0;

timer=setInterval(function(){

var btn=true;

for(var attr in json){

speed=speed<0?-speed:speed;

changeValue=parseInt(getStyle(obj,attr));

speed=changeValue>json[attr]?-speed:speed;//判断速度正负。

if((speed<0&&changeValue+speed>json[attr])||(speed>0&&changeValue+speed

obj.style[attr]=changeValue+speed+'px';

}

else{

obj.style[attr]=json[attr]+'px';

}

}

if(btn){

clearInterval(obj.timer);

}

},30);

}

/*--------------------获取样式的函数-------------------------*/

function getStyle(obj,attr)

{

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null )[attr];

}