延迟hover事件

延迟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")
    });
1
2
3
4
5
6
7
8
9
10
11
12
13

就是每隔0.5s再改变这个动画，如果同时有触发了Hover事件那么就停止掉原来未触发的延时器，重新开启一个新的延时器。就达到了想要的效果！