Jquery hover方法的效果延时处理

直接进入主题

今天在做一个页面的时候,需要处理一个鼠标移动hover的效果,这边我使用了JQ hover方法。如图:

鼠标移到上面的时候需要解锁,将底层的物品显示出来。我这边用到的

// 锁定区域解锁效果

$(document).ready(function(){

var lockLi=$("#unlockGift li");

$(lockLi).hover(function(){

$(this).eq(lockLi.index()).animate({ opacity: "0" }, 2000);

},function(){

$(this).eq(lockLi.index()).animate({ opacity: "1" }, 1500);

});

});

这样初步的效果可以解决,但是有个问题,鼠标重复在相应区域滑动的时候,动画会一直执行,直到和鼠标经过的次数相同位置。比如鼠标移进3次,移出3次,动画就会出现三次。这显然是嫉妒影响用户体验的。查找相关资料后,发现在在动画前加个stop();方法就能很好的解决的这个问题;

改进后代码:

// 锁定区域解锁效果

$(document).ready(function(){

var lockLi=$("#unlockGift li");

$(lockLi).hover(function(){

$(this).eq(lockLi.index()).stop(false,false).animate({ opacity: "0" }, 2000);

},function(){

$(this).eq(lockLi.index()).stop(false,false).animate({ opacity: "1" }, 1500);

});

});


网上关于 stop的解释:

top()在语法上有两个参数,分别都是Boolean布尔值。且都是可选的,但是也有规定,如下:

$(selector).stop(stopAll,goToEnd)

参数:(默认情况下,不写参数,则会被认为两个参数都是false。)

stopAll:可选。规定是否停止被选元素的所有加入队列的动画。意思就是如果该参数值为true,则会停止所有后续动画或事件。如果该参数值为false,则只停止被选元素当前执行的动画,后续动画不受影响。因此,该参数一般都为false。

goToEnd:可选。规定是否允许完成当前动画,该参数只能在设置了stopAll参数时使用。上面我们说了,stopAll参数我们一般都会写fasle值,不是默认,而是真实的写上该参数。那么goToEnd参数就有两个选择了,一个是false,一个是true。其中意思,大家应该都明白了。一般都为true。意思就是允许完成当前动画。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

问问那只猫

老板大气~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值