原图地址：淘宝tms里发现，偷过来用用，喜欢就去看看咩~~~

做导航菜单的时候，有的时候希望，鼠标移到菜单上去过会儿才激活二级菜单，鼠标移出去之后过会儿才消失。jquery自带的 hover 事件是立马响应的。google了下网上好像没lazyhover的插件。于是 就华丽丽的诞生了这个lazyhover 的插件^__^。

闲话少说，先上代码：

$(function(){
    $.fn.lazyhover = function(fuc_on, fuc_out, de_on, de_out) {
        var self = $(this);
        var flag = 1;
        var h;
        var handle = function(elm){
            clearTimeout(h);
            if(!flag) self.removeData('timer');
            return flag ? fuc_on.apply(elm) : fuc_out.apply(elm);
        };
        var time_on  = de_on  || 0;
        var time_out = de_out || 500;
        var timer = function(elm){
            h && clearTimeout(h);
            h = setTimeout(function() { handle(elm);  }, flag ? time_on : time_out);
            self.data('timer', h);
        }
        self.hover(
            function(){
                flag = 1 ;
                timer(this);
            },
            function(){
                flag = 0 ;
                timer(this);
            }
        );
    }
});

插件使用方法我就不说了，直接贴带代码前就可以，当然jquery.js是必要的(丫不用jquery就当看A-V =，=)。

算了，还是贴个使用方法吧：使用方法其实跟 jquery一样就是多了两个参数，一个是延迟进入的时间(毫秒)，还有一个是延迟退出的时间。

$('#target').lazyhover(
    function(){
            $(this).addClass('unfold');
    },
    function(){
            $(this).addClass('unfold');
    },
    200,1000 //就多了2个参数
);

目前只是个初版，觉得有好多细节可以优化，
待优化点：

• 1. 比如当延迟时间是0的时候就要避开setTimeout，毕竟setTimeout是个比较耗资源的家伙。
• 2. 其次当操作对象过多的时候浏览器负载能力的处理，目前是单对象独立时间事件

好了打完收工，有意见想射就射出来吧。哥不怕，咩哈哈~~~~ 用脸接着
开源才是真汉子。

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)