延迟hover事件
最近在写导航栏的时候遇到一个问题,就是我给一个导航列表加了一个动画,更换的时候会触发这个动画。实际效果如图
这个是要达到的效果,但是在实现的时候,随着鼠标在导航栏上移动会产生卡顿的现象。
如图
背景图会在鼠标经过的每一个导航中卡顿一下,解决的办法就是延迟hover的触发事件。
代码如下
var timer;
$('.navigation ul li ').hover(function () {
clearTimeout(timer);
var elem = $(this);
var index=$(this).index();
timer = setTimeout(function(){
elem.parent().find('div').animate({'left':index*3.16+'rem'},400);
elem.find('a').css('color',"#ffffff");
},500);
},function () {
$(this).find('a').css('color',"#000")
});
就是每隔0.5s再改变这个动画,如果同时有触发了Hover事件那么就停止掉原来未触发的延时器,重新开启一个新的延时器。就达到了想要的效果!