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

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

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

一、引入jq

二、加入以下插件代码

/*
 * 鼠标经过延时响应
*/
(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("离开");
    }});

四、方法参数说明

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

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

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

转载于:https://www.cnblogs.com/phpyangbo/p/7991561.html