为什么鼠标放上去,上去了,不会下来,但是鼠标再动一下,就从下面慢慢上来了

来源:7-1 JS动画案例

骑士归来之时

2017-04-24 11:42

function move(obj,json,fn){
	var flag=true;
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		for(var attr in json){
			var icur=0;
			//判断传入的是否为opacity
			if(attr == "opacity"){
				icur=Math.round(parseFloat(getStyle(obj,attr))*100);
			}else{
				icur=parseInt(getStyle(obj,attr));
			}
			var speed=(json[attr]-icur)/10;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			//判断是否全部达到最终形态,如没有继续函数
			if(icur != json[attr]){
				flag=false;
			}
			if(attr=="opacity"){
				obj.style.filter="alpha(opacity:"+(icur+speed)+")";
				obj.style.opacity=(icur+speed)/100;
			}else{
				obj.style[attr]=(icur+speed)+"px";
			}
			if(flag){
				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 type="text/javascript">
		window.onload=function(){
			var oDiv=document.getElementById('d1'),
				as=oDiv.getElementsByTagName('a');
			for(var i=0;i<as.length;i++){
				as[i].onmouseover=function(){
					var _this=this.getElementsByTagName("i")[0];
					move(_this,{top:-20,opacity:0},function(){
						_this.style.top=40+'px';
						move(_this,{top:20,opacity:100});
					});
				};
			}
		}
	</script>


写回答 关注

3回答

  • feno
    2017-04-24 17:20:37

    可以去学习下js的闭包。

  • 骑士归来之时
    2017-04-24 14:04:19

    看了另外一位同学的解释,需要把flag定义在定时器内,否则flag永远都是false,所以停不下来。导致这个原因

  • 茉心
    2017-04-24 13:19:53

    在18行后加入

    else{

        flag=true;

    }

    即可

    骑士归来之时

    但是这么添加之后的话,当一个属性达到预期值了,另一个属性为达到,他也停止了

    2017-04-24 13:32:00

    共 1 条回复 >

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题