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

前端APP 投稿 13400 0 评论

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毫秒后弹出含有“经过我!”文字字样的弹出框。

编程笔记 » jQuery–鼠标经过(hover)事件的延时处理

赞同 (68) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽