javascript - 这个小动画怎么搞才能达到目的
本文介绍了javascript - 这个小动画怎么搞才能达到目的的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
//定义动画函数
function easing(elem,pos,time){
if(elem.timeout)
clearTimeout(elem.timeout);
var right=parseInt(elem.css("right"));
if(right<pos)
//right+=Math.abs( Math.ceil((right-pos)/10) ) ;有问题的写法
right+=Math.ceil((pos-right)/10);//没问题的写法
else if(right> pos)
//right-=Math.abs( Math.ceil((right-pos)/10) );有问题的写法
right-=Math.ceil((right-pos)/10)//没问题的写法
else
return true;
elem.css("right",right+"px");
elem.timeout=setTimeout(function(){easing(elem,pos,time)},time);
}
---------------------------------------------------------
var elem=$("#rightbt");
elem.mouseover(function(){
easing(elem,0,10);
}).mouseout(function(){
easing(elem,-48,10);
})
elem是一个已设置绝对定位的元素(position:absolute;right:-48px;),
希望当鼠标放在他上面时或离开时,该元素的right属性在0到-48之间变化(该元素宽度200px);
问题是上面有两行代码貌似有问题,当鼠标放在元素上时,该元素right应为0px,但实际却只达到-9px;当鼠标离开时,该元素right应为-48px,实际上可以达到-48px;
请大神指点,问题到底在哪??
案例:https://jsfiddle.net/xx1hzt1t/1/
解决方案
当-1 < (pos-right)/10 < 0的时候,Math.ceil得到的值为0,right就一直+0,导致死循环了。
这篇关于javascript - 这个小动画怎么搞才能达到目的的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文