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


Posted in Javascript onAugust 20, 2020

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

Javascript 相关文章推荐
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
React组件生命周期详解
Jul 03 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 #Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 #Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 #Javascript
js判断日期时间有效性的方法
Oct 24 #Javascript
JavaScript中日期的相关操作方法总结
Oct 24 #Javascript
JavaScript中Date对象的常用方法示例
Oct 24 #Javascript
js实现表单多按钮提交action的处理方法
Oct 24 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python正则表达式使用经典实例
2016/06/21 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python画图高斯分布的示例
2019/07/10 Python
python global关键字的用法详解
2019/09/05 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
jupyter 添加不同内核的操作
2021/02/06 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
2015年汽车销售员工作总结
2015/07/24 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技