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 nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
javascript动态创建链接的方法
May 13 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
jquery实现全屏滚动
Dec 28 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
javascript self对象使用详解
Oct 18 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 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
JAVA/JSP学习系列之七
2006/10/09 PHP
PHP 类型转换函数intval
2009/06/20 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
php实现登录页面的简单实例
2019/09/29 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
javascript基本语法
2016/05/31 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
详解Python中类的定义与使用
2017/04/11 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
Java基础知识面试要点
2016/07/29 面试题
财务内勤岗位职责
2014/04/17 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
vue修饰符.capture和.self的区别
2022/04/22 Vue.js