jquery 鼠标通过延时触发事件，jquery插件

jquery 鼠标通过延时触发事件。

用来作：鼠标通过选项卡，延时切换，鼠标通过商城分类延时显示，最好不过，防止用户随便滑动就切换了选项卡。

1、引入jq

2、加入如下插件代码

/*
 * 鼠标通过延时响应
*/
(function($){
    $.fn.hoverDelay = function(options){
        var defaults = {
            hoverDuring: 400,    //鼠标通过延时时间
            outDuring: 400,    //鼠标离开延时时间
            hoverEvent: function(){
                $.noop();
            },
            outEvent: function(){
                $.noop();    
            }
        };
        var sets = $.extend(defaults,options || {});
        var hoverTimer, outTimer;
        return $(this).each(function(){
            $(this).hover(function(){
                clearTimeout(outTimer);
                hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
            },function(){
                clearTimeout(hoverTimer);
                outTimer = setTimeout(sets.outEvent, sets.outDuring);
            });    
        });
    }      
})(jQuery);

 

三，调用方法

    //鼠标通过分类事件
    $(".header_three_menu_main_li").hoverDelay({hoverEvent: function(){
        alert("通过我！");
    },outEvent:function(){
        alert("离开");
    }});

4、方法参数说明

hoverDelay方法共四个参数，表示意思以下：

hoverDuring       鼠标通过的延时时间
outDuring          鼠标移出的延时时间
hoverEvent        鼠标通过执行的方法
outEvent         鼠标移出执行的方法

若有疑问，欢迎入群交流：646104701，入群后，请发送此博文连接，说明问题。