一、关于鼠标悬停事件和延迟
鼠标通过事件是Web页面上最常见的事件之一。

一般来说,我们不延迟的鼠标悬停事件。然而,有时候,为了避免不必要的干扰,鼠标悬停事件通常延迟。所谓的干扰,当用户无意中碰到鼠标经过链接,标签,或其他地区,这表明没有任何隐藏的层,或者TAB切换因为这些元素,被绑定到鼠标事件(或mouseover),无延迟,时间会立即触发,会打扰到用户。

例如,在腾讯的主页上,几乎所有的鼠标事件都被延迟了,比如它的标签:


或搜索导航栏的顶部,请参见:


二、示范与示范
本文的主要内容是显示鼠标延迟写在前一天的方法,该方法在jQuery,水平有限,仅供参考。本文通过搜索和腾讯的网络搜索首页一些老鼠的作用是作为一个例子来说明在jQuery延迟处理。下图是演示页面的效果截图:


三,代码和实现
当谈到延迟,窗下的setTimeout方法是分不开的,在这个例子中的jQuery方法的核心是setTimeout。代码不长,完成如下:

复制代码代码如下所示:
(函数($){)
美元。fn.hoverdelay =功能(选项){
var默认值= {
hoverduring:200,
③:200,
hoverevent:函数(){
NOOP()美元;
},
outevent:函数(){
NOOP()美元;
}
};
VaR套=美元。扩展(默认值,选择| | { });
无功hovertimer,outtimer;
返回$(这个)。每个(函数()){
$(this)Hover(函数(){)
ClearTimeout(outtimer);
hovertimer = setTimeout(sets.hoverevent,集。hoverduring);
}函数(){()
ClearTimeout(hovertimer);
outtimer = setTimeout(sets.outevent,集。③);
});
});
}
}(jQuery);


这个代码的目的是让鼠标从事件和延迟中分离出来,通过这种方法解决了延迟和延迟间隙:

复制代码代码如下所示:
$(#试验({ HoverDelay)。
hoverevent:函数(){
警报(通过我!;
}
});

意思是id测试元素在鼠标经过我200毫秒后突然弹出!文字弹出框。

好,现在应用到本文的示例中。

除上述延迟后鼠标腾讯网首页的搜索框,皮肤也值得一提,在皮肤上正如我之前提到的,在技术设计和用户体验的产品-马化腾jQuery实现的演示页面,你真的可以点击这里:腾讯家居个性化的AVI演示页

首先,显示腾讯页面搜索栏的主要HTML域代码:

复制代码代码如下所示:

网页
照片
视频
音乐
搜索栏
提出一个问题
博客
你越


综合的
新闻
词典
生活
百科
所有产品





它与第一页代码几乎相同,例如一个错误的更改。在本文中没有应用技术内容的延迟方法之后,可以应用以下代码来实现延迟执行。

复制代码代码如下所示:
$()。每个(函数(){)
$(# sosofod H3)。每个(函数(){)
var = $(这个);
var id = that.attr(ID);
如果(id){
That.hoverDelay({
hoverevent:函数(){
$(一),Attr(班
that.attr(班
$(这)。Attr(班
}
});
其他{ }
That.hoverDelay({
③:1000,
hoverevent:函数(){
$(# TM)显示();
},
outevent:函数(){
$(# TM)藏();
}
});
}
});

遗憾的是,代码是这样的,没有技术含量,我希望它是有用的。更多的下拉鼠标移动1000毫秒后,下拉框是隐藏的。

基本上,代码是在页面上说一些有用的东西。

的hoverdelay方法包括四个参数,这意味着继:

对hoverduring鼠标通过时间延迟时间
在鼠标的拆除时间延迟时间
执行hoverevent鼠标的方法
移动鼠标outevent执行方法