jQuery鼠标悬停事件延迟处理示例

1.鼠标悬停事件和延迟鼠标通过事件是网页上最常见的事件之一。简单的悬停可以用CSS :悬停伪类实现，复杂的悬停可以用js实现。一般来说，我们不会延迟鼠标悬停事件。但是，有时为了避免不必要的干扰，鼠标悬停事件往往会被延迟。干扰是指当用户无意中用鼠标触摸链接、标签或其他区域时，隐藏层不显示或标签被切换。但是，因为这些元素与悬停事件(或鼠标悬停事件)绑定，并且没有延迟，所以这些时间会立即触发，这会干扰用户。比如在腾讯的主页上，几乎所有的鼠标经过事件都是延迟的，比如它的tab: 。

或者顶部的搜索导航栏，见下图：。

二.示例和演示本文的主要内容是展示我前几天写的鼠标延迟方法。jQuery下的方法比较差，仅供参考。本文以腾讯主页搜索栏中的一些鼠标传递效果为例，演示了jQuery下的延迟处理。下图是演示页面效果截图：。

三、代码和实现说到延迟，离不开window下的setTimeout方法。本例中jQuery方法的核心也是setTimeout。代码简短完整如下：复制的代码如下： (function ($) {$)。fn。悬停延迟=函数(选项){ var defaults={在： 200期间悬停，在3360 200期间退出，悬停事件3360 function () {$。noop()；}，outEvent:函数(){ $。noop()；} };var集合=$。extend(默认值，选项| | { })；var hoverTimer，outTimer返回$(这个)。每个(函数(){ $(this))。hover(function(){ cleartime out(Outimer))；气垫定时器=setTimeout(sets .气垫事件，sets .气垫期间)；}，function(){ cleartime out(HeavTimer)；outTimer=setTimeout(set . out event，set . outduring)；});});} })(jQuery)；这段代码的目的是将鼠标与事件和延迟分开，这个问题已经用这个方法解决了。您所要做的就是设置延迟时间和相应的鼠标通过或移除事件。举一个简单的例子，下面的代码：复制代码如下： $ ('# test ')。气垫延迟({气垫事件3360function () {alert('传过来！'。);} });表示鼠标经过200毫秒后，id为test的元素弹出，包含“放过我！”。字符弹出框。好了，现在应用到本文的例子中。在腾讯首页的搜索框里，除了鼠标被延迟了之外，值得一提的是皮肤变了。我之前提到过，在jQuery-马的产品设计和用户体验的一些技术实现的文章中，可以在这里狠狠点击对应的演示页面：腾讯首页个性化换肤演示页面首先，展示腾讯首页搜索栏的主要HTML域代码：复制代码如下： div ID=' sososofod ' ID=' sosososooweb ' class=' S1 '网页/H3 H3 ID=' sososooimg ' class=' S2 '图片/H3 H3 ID=' sososovid ' class='class=' S2 ' morediv style=' display : none；'class=' more ' id=' TM ' ullia href=' # '综合/a/li lia href='# '新闻/a/li lia href='# '词典/a/li lia href='# '生活/a/li lia href='# '百科全书/a/Li listyle=。A href='# '所有产品/a/li /ul /div /h3 /div与上一页代码几乎相同，如原装替换。在应用了本文技术含量很少的延迟方法之后，可以应用下面的代码来实现延迟执行。复制代码如下： $(. S2 ')。每个(函数(){$ ('# sososofodh3 '))。每个(function () {var那=$(this)；var id=that . attr(' id ')；if(id){ that . HeaLTH delay({ HeaLTH event : function(){ $(. S1 '))。attr('class '，' S2 ')；that.attr('class '，' S1 ')；//感谢“type23”提供了绑定对象方法$(this)。attr('class '，' S1 ')；} });} else { that . hover delay({ OutPuring : 1000，Hover event : function(){ $(' # TM ')。show()；}，outEvent:函数(){ $('#tm ')。hide()；} });} });唉，可惜了，代码就是这样，没有技术含量，希望有用就有用。“更多”下拉鼠标移出，1000毫秒后下拉框隐藏。基本上，代码是支持页面的。说点有用的。悬停延迟方法中有四个参数，表示以下含义：悬停在鼠标伸出的延迟时间内鼠标移开的延迟时间内；鼠标移除的悬停事件方法；鼠标移除的outEvent方法。