本文主要是介绍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。意思就是允许完成当前动画。
这篇关于Jquery hover方法的效果延时处理的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!