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。意思就是允许完成当前动画。

​