大神们帮我看看这个动画哪里有问题,点注册的时候小条正常滑到注册那,点登录的时候就不正常了,我觉得是定时器问题
这是这部分代码
load_but.onclick = function(){ //点击登陆按钮
var timebar = null;
timebar = setTimeout(bar_move(0),100); //滑动小条在点击之后延时100毫秒执行
}
sign_but.onclick = function(){ //点击注册按钮
var timebar = null;
timebar = setTimeout(bar_move(185),100) //滑动小条在点击之后延时100毫秒执行
}
var timemovebar = null; //滑动小条动画方法
function bar_move(target){
clearInterval(timemovebar);
timemoverbar = setInterval(function(){
if(move_bar.offsetLeft==target){
clearInterval(timemovebar);
}else{
var speed = (target - move_bar.offsetLeft)/10;
speed = speed<0?Math.floor(speed):Math.ceil(speed);
move_bar.style['left']=move_bar.offsetLeft+speed+'px';
}
},10)
}
原因在于你把bar_move函数中的setInterval()赋值给的是timemoverbar,而其它地方用的都是timemovebar,move多了一个r。。导致bar_move函数中的clearInterval()不能把定时器清除掉。
滑块向右移能停下来是因为这是一个减速运动,speed会越来越小最后变为1。然后move_bar的left就不停地加1直到等于185。最后就会执行上面的clearInterval()方法,但由于你写错了,导致其实setInterval()一直都没被清除掉。当你再点击登录时,就又添加了一个定时器,执行的却是同一个函数,就出问题了。你在定时器中打印speed就可以看清楚了。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。