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 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
vue数据响应式原理知识点总结
Feb 16 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
linux iconv方法的使用
2011/10/01 PHP
二招解决php乱码问题
2012/03/25 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
在pycharm中显示python画的图方法
2019/08/31 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
《最大的“书”》教学反思
2014/02/14 职场文书
个人承诺书怎么写
2014/05/24 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
小学教师自我评价
2015/03/04 职场文书
公司内部升职自荐信
2015/03/27 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python