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，入羣后，請發送此博文連接，說明問題。