游客

标题:jQuery 鼠标经过(hover)事件的延时处理示例
正文:
一、关于鼠标hover事件及延时
鼠标经过事件为web页面上非常常见的事件之一。简单的hover可以用CSS :hover伪类实现，复杂点的用js。

一般情况下，我们是不对鼠标hover事件进行延时处理。但是，有时候，为了避免不必要的干扰，常会对鼠标hover事件进行延时处理。所谓干扰，就是当用户鼠标不经意划过摸个链接，选项卡，或是其他区域时，本没有显示隐藏层，或是选项卡切换，但是由于这些元素上绑定了hover事件（或是mouseover事件），且无延时，这些时间就会立即触发，反而会对用户进行干扰。

例如，在腾讯网首页，几乎对所有的鼠标经过事件进行了延时处理，例如其选项卡：



或是其顶部的搜搜导航条，见下图：



二、实例及演示
本文的主要内容就是展示我前几天写的鼠标延迟的方法，jQuery下的方法，水平拙劣，仅供参考。本文就以腾讯网首页搜搜搜索栏的一些鼠标经过效果为实例，演示jQuery下的延时处理。下图为demo页面的效果截图：



三、代码与实现
说到延时，离不开window下的setTimeout方法，本实例的jQuery方法的核心也是setTimeout。代码不长，完整如下：

代码如下:
(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(fun
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页