jQuery动画的hover连续触发动画bug处理
合集下载
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
jQuery动画的hover连续触发动画bug处理
⼀、问题
为元素设置hover上实现动画的效果,当⿏标反复快速进⼊元素时,动画会在⿏标停⽌后依然执⾏,导致动画和⿏标的动作不⼀致。
⼆、解决⽅法
要解决这种问题,可以使⽤jquery的stop()⽅法。
stop([clearQueue],[gotoEnd]):
有两个参数:
第⼀个参数[clearQueue]: 决定是否清除队列,设置为true,则清空队列,⽴即结束动画;
第⼆个参数[gotoEnd]:决定当前正在执⾏的动画是否⽴即完成,设置为true,则完成队列,⽴即完成动画。
三、代码
源代码:
$(".layer").hover(function(){
$(this).animate({left:0},500);
},function(){
$(this).animate({left:-100},500);
});
如果快速重复把⿏标移⼊移出该元素,就会产⽣"动画积累",⿏标停⽌移动后,积累的动画还会继续执⾏,直到执⾏完毕。
解决后的代码如下:
$(".layer").hover(function(){
$(this).stop(true).animate({left:0},500);
},function(){
$(this).stop(true).animate({left:-100},500);
});
也可以将第⼆个参数设置为true,让动画达到最后状态。
$(this).stop(false,true).animate({left:0},500);。