龙空技术网

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

奕宝儿的成长记录 425

前言:

现时各位老铁们对“jquerymouseover无效”大致比较注意,小伙伴们都需要知道一些“jquerymouseover无效”的相关文章。那么小编同时在网络上搜集了一些有关“jquerymouseover无效””的相关资讯,希望同学们能喜欢,我们快快来了解一下吧!

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

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

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

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

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

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

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

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

以下为W3School的官方实例:

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

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

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

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

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

而第二个动画还会执行,

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

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

stop()两个参数:

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

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

标签: #jquerymouseover无效 #jquery鼠标移动事件