jQuery实现鼠标经过事件的延时处理效果

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)事件的延时处理全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • 用jquery实现的一个超级简单的下拉菜单

    用jquery实现的一个超级简单的下拉菜单

    用jquery实现的一个超级简单的下拉菜单. 效果图 初始效果  鼠标悬浮效果  代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.11.1.js"></script> <style> nav a { text-decoration: none; } nav >

  • jQuery hover 延时器实现代码

    例如: 复制代码 代码如下: $('#foo').slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之间延时800毫秒. hover是否可以设计一个延时器呢?答案是肯定的.延时操作目的是为了防止用户误触发事件,一般情况下鼠标指针小于150毫秒的停留时间都可以被忽略.其实,如果入侵delay全能让其作用在hover事件上,但是为了避免John Resig不断的折腾jQuery而导致兼容问题,还是老老实实的写标准插件比较好.

  • jQuery实现的导航下拉菜单效果示例

    jQuery实现的导航下拉菜单效果示例

    本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • 基于jquery的二级联动菜单实现代码

    jQuery 1.3.2 简单实现select二级联动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • JQuery 写的个性导航菜单

    JQuery 写的个性导航菜单

    (一):XHTML: 复制代码 代码如下: <div id="sidebar"> <ul> <li><a href="index.html" class="normalMenu">Home</a></li> <li><a href="services.html" class="normalMenu">Servic

  • jQuery 鼠标经过(hover)事件的延时处理示例

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

    一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处理.但是,有时候,为了避免不必要的干扰,常会对鼠标hover事件进行延时处理.所谓干扰,就是当用户鼠标不经意划过摸个链接,选项卡,或是其他区域时,本没有显示隐藏层,或是选项卡切换,但是由于这些元素上绑定了hover事件(或是mouseover事件),且无延时,这些时间就会立即触发,反而会对用户进行干

  • jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

    jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

    本文实例讲述了jQuery实现带延时功能的水平多级菜单效果.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • Jquery实现图片预加载与延时加载的方法

    本文实例讲述了Jquery实现图片预加载与延时加载的方法.分享给大家供大家参考.具体分析如下: 有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: 复制代码 代码如下: function loadimg(arr,funLoading,funOnLoad,funOnError){  var numLoaded=0,  numError=0,  isObject=Obje

  • Jquery带搜索框的下拉菜单

    Jquery带搜索框的下拉菜单

    1.样式引用: 复制代码 代码如下: <link rel="stylesheet" href="~/Js/Ddl_Chosen/chosen.css" /> 2.由于应用了Jquery,所以引用Jquery.(下载地址) 复制代码 代码如下: <script src="<%= ResolveUrl("~/Js/Jquery.js")%>" type="text/javascript&qu

  • 用jquery写的菜单从左往右滑动出现

    用jquery写的菜单从左往右滑动出现

    最近,刚好在研究微网站的制作,查阅了大量的资料都是关于微信3平台开发教程,几乎没有这类的介绍,不过都是第三方平台提供模板制作微站而已,后来很感谢柳峰博客最后写的微网站的解惑, "什么是微网站? 微网站是新瓶装老酒,被一些搞营销的人给神化了,以至于很多开发者都在问什么是微网站,如何开发微网站.微网站本质上就是以微信浏览器为入口的手机网站(Web APP),能够兼容Android.iOS.WP等操作系统.开发微网站用到的技术与开发普通网站一样,都是基于HTML(HTML5).CSS.Javascri

  • jQuery实现的无限级下拉菜单功能示例

    jQuery实现的无限级下拉菜单功能示例

    本文实例讲述了jQuery实现的无限级下拉菜单功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单(无限级)</title> <style> *{ padding: 0; margin: 0; } li{ list-style-type: none;

  • jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

    jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

    本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

随机推荐