前言:
现时各位老铁们对“jquerymouseover无效”大致比较注意,小伙伴们都需要知道一些“jquerymouseover无效”的相关文章。那么小编同时在网络上搜集了一些有关“jquerymouseover无效””的相关资讯,希望同学们能喜欢,我们快快来了解一下吧!最近公司在登陆上,新加了一个扫码登录功能
当鼠标移到二维码上时,提示图片出现,移出消失
本来是很简单的功能,hover/mouseover+mouseout...都能实现
但是在出现一个情况,当你频繁操作时,会出现闪烁现象。
原因:不断的将鼠标移入移出,就会造成动画的积累。
当鼠标停止后,动画会一直执行,这样最后的结果还会导致动画结果和鼠标移出结果不一致。
查看一些资料后,发现jq中就有解决这个问题的api:stop() 方法阻止动画执行。
官方定义:jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
以下为W3School的官方实例:
上边我的代码就应该改为:
$(".login_erweima").stop().animate({ left:"100px"});
代码中加入.stop()即可立即结束动画
但是当我们的代码有两种以上动画出现时,不带参数的stop就会只停止第一个动画
而第二个动画还会执行,
所以多个动画时,我们用.stop(true)来阻止全部动画执行,
还可以加入两个参数.stop(false,true),表示动画进行到最后状态。
stop()两个参数:
stopAll:如果设置成true,则清空队列。可以立即结束动画。
goToEnd:如果设置成true,则完成队列。可以立即完成动画。