有你在真好 的个人博客
hover-mouse系列同时移入移出使用闪烁问题
阅读:2045 添加日期:3/30/2021 5:41:11 PM

最近公司在登陆上,新加了一个扫码登录功能

当鼠标移到二维码上时,提示图片出现,移出消失

本来是很简单的功能,hover/mouseover+mouseout...都能实现

但是在出现一个情况,当你频繁操作时,会出现闪烁现象。

hover/mouse系列同时移入移出使用闪烁问题

原因:不断的将鼠标移入移出,就会造成动画的积累。

当鼠标停止后,动画会一直执行,这样最后的结果还会导致动画结果和鼠标移出结果不一致。

查看一些资料后,发现jq中就有解决这个问题的api:stop() 方法阻止动画执行。

官方定义:jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

hover/mouse系列同时移入移出使用闪烁问题

以下为W3School的官方实例:

hover/mouse系列同时移入移出使用闪烁问题

截图可能不清楚,可自行在W3School查询.stop()方法

上边我的代码就应该改为:

$(".login_erweima").stop().animate({ left:"100px"});

代码中加入.stop()即可立即结束动画

但是当我们的代码有两种以上动画出现时,不带参数的stop就会只停止第一个动画

而第二个动画还会执行,

所以多个动画时,我们用.stop(true)来阻止全部动画执行

还可以加入两个参数.stop(false,true),表示动画进行到最后状态

stop()两个参数:

stopAll:如果设置成true,则清空队列。可以立即结束动画。

goToEnd:如果设置成true,则完成队列。可以立即完成动画。

hover/mouse系列同时移入移出使用闪烁问题