jQuery–鼠标经过(hover)事件的延时处理

 
更多

jQuery – 鼠标经过(hover)事件的延时处理,具体JS代码如下:

(function($){
    $.fn.hoverDelay = function(options){
        var defaults = {
            hoverDuring: 200,
            outDuring: 200,
            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);

hoverDelay方法共四个参数,表示意思如下:

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

该函数的目的在于让鼠标经过事件和延时分离的出来,延时以及延迟的清除都已经由此方法解决了。您所要做的,就是设定延时的时间大小,以及相应的鼠标经过或是移除事件即可。举个简单的例子吧,如下代码:

$("#test").hoverDelay({
	hoverDuring: 1000,
	outDuring: 1000,
	hoverEvent: function(){
		$("#tm").show();
	},
	outEvent: function(){
		$("#tm").hide();
	}
});

 以下为更简洁的一个案例:

$("#test").hoverDelay({
    hoverEvent: function(){
        alert("经过我!");
    }
});

表示的含义是id为test的元素在鼠标经过后200毫秒后弹出含有“经过我!”文字字样的弹出框。

打赏

本文固定链接: https://www.cxy163.net/archives/4623 | 绝缘体

该日志由 绝缘体.. 于 2013年05月23日 发表在 未分类 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jQuery–鼠标经过(hover)事件的延时处理 | 绝缘体
关键字: , , , ,

jQuery–鼠标经过(hover)事件的延时处理:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter