Ninely的小站

jQuery:hover延时效果的一些处理

一开始鼠标的hover事件我都会用css:hover伪类来实现,它的特点也很明显,就是无延时立即触发,但有时可能会造成一些干扰,想要用户体验更好的话就要用js。
比如,让鼠标在元素上停留规定时间内才触发hover事件。我在一篇博文上找到一段比较好的处理代码 :

文章出处

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
(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);
// 具体使用,给id为“#test”的元素添加hoverEvent事件
$("#test").hoverDelay({
// 自定义,outEvent同
hoverEvent: function(){
alert("经过我!");
}
});

这段代码好在于把鼠标经过事件和延时分离出来,延时以及延迟的清除都交由hoverDelay来处理,具体hover事件自己自定,是一段能够很通用的代码。
但运用起来还有些小问题,在自定义hoverEvent、outEvent中使用this的话,它所指向的是window这个对象,而不是当前上下文,所以我改进了下,通过apply()来实现this绑定。
改进部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
return $(this).each(function(){
// 保存当前上下文的this对象
var $this = $(this)
$this.hover(function(){
clearTimeout(outTimer);
hoverTimer = setTimeout(function () {
// 调用替换
sets.hoverEvent.apply($this);
}, sets.hoverDuring);
}, function(){
clearTimeout(hoverTimer);
outTimer = setTimeout(function () {
sets.outEvent.apply($this);
}, sets.outDuring);
});
});

改完以后我自己的小项目都用这个方法来处理hover或者其他的延时效果了。