JQ的hover事件拓展

编写原因:当鼠标滑过某个带有hover事件的元素,但是仅仅是路过,并不是希望查看此部分内容的时候,效果不理想

$.fn.extend({
delayed : function(fn1,fn2,time){
time = time || 150
var _this = this; _this.delayedTimer = null;
return $(this).mouseenter(function(){
clearTimeout(_this.delayedTimer);
_this.delayedTimer = setTimeout(function (){
fn1.call(_this);
},time)
}).mouseleave(function(){
clearTimeout(_this.delayedTimer);
_this.delayedTimer = setTimeout(function (){
fn2.call(_this);
},time)
})
}
})

用法和hover基本一样,但是此方法目前无法针对多个元素,但是添加起来应该也不费劲

hover事件优化(延时操作)的更多相关文章

  1. 鼠标经过(hover)事件的延时处理

    关于鼠标hover事件及延时 鼠标经过事件为web页面上最常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处理.但 ...

  2. jQuery – 鼠标经过(hover)事件的延时处理

    一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处 ...

  3. 2.linux系统基础笔记(延时操作、实时系统中的定时器、事件)

    延时操作 延时操作是操作系统中经常遇到的一种情形.延时的原因很多,有的时候是为了等待外设芯片处理结束,有的时候是为了暂时释放cpu的使用权,有的就是为了希望在一段时间获取资源,如果没法在单位时间内获取 ...

  4. js中hover事件时候的BUG以及解决方法

    hover事件是我们在开发前段时候遇到的稀松平常的问题,但是有没有发现会出现有一个BUg,比如,你移动到一个元素上,让它执行一个方法,然后你快速的移入移出的时候,他会进行亮瞎你眼睛的频闪效果,而且跟得 ...

  5. bootstrap中的dropdown组件扩展hover事件

    bootstrap的下拉组件,需要点击click时,方可展示下拉列表.因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框.其实在bootstrap ...

  6. 分享一个jquery插件,弥补一下hover事件的小小不足

    hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你 ...

  7. jquery事件和动画操作集锦

    一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){   //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...

  8. chrome中如何查看元素的hover事件

    chrome中如何查看元素的hover事件 一.总结 一句话总结: Elements->Styles里面可以看到":hov":点开选择":hover"就可 ...

  9. 移动端触摸、点击事件优化(fastclick源码学习)

    移动端触摸.点击事件优化(fastclick源码学习) 最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕fastclick展开.fastclick githu ...

随机推荐

  1. React的第一步

    首先了解React中所牵扯到的几个重要的概念 什么是React? 是Facebook的开发团队开发出来的一个用于构建用户界面个js库,最近才开源出来公布于世,它的初衷是用于创建“独立的视图组件”,一个 ...

  2. Eclipse: How to Navigating Java call stack in Eclipse

    Link: http://stackoverflow.com/questions/3256369/navigating-java-call-stack-in-eclipse 解决方法: In the ...

  3. Eclipse Java注释模板设置详解,更改 ${user}和${date}

    修改MyEclipse eclipse 注释的作者名字 转自:http://www.oschina.net/question/158170_31311 在eclipse/myeclipse中,当我们去 ...

  4. 一些有用的HTML5 pattern属性

    最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了.于是想要尝试其它的实现方案,最 ...

  5. 基于单决策树的AdaBoost

    ①起源:Boosting算法 Boosting算法的目的是每次基于全部数据集,通过使用同一种分类器不同的抽取参数方法(如决策树,每次都可以抽取不同的特征维度来剖分数据集) 训练一些不同弱分类器(单次分 ...

  6. POJ 2407 (欧拉函数)

    题目链接: http://poj.org/problem?id=2407 题目大意:求小于n且与n互质的正整数个数. 解题思路: 欧拉函数=小于n且与n互质的正整数个数. 公式=n*(1-1/P1)* ...

  7. Codeforce - Runtime Error

    Bahosain was trying to solve this simple problem, but he got a Runtime Error on one of the test case ...

  8. jQuery的事件委托实例分析

    事件委托主要是利用事件冒泡现象来实现的,对于事件委托的精准的掌握,可以有利于提高代码的执行效率.先看一段代码实例: <!DOCTYPE html> <html> <hea ...

  9. 【BZOJ】1367: [Baltic2004]sequence

    题意 给\(n(n \le 10^6)\)个数的序列\(a\),求一个递增序列\(b\)使得\(\sum_{i=1}^{n} |a_i-b_i|\)最小. 分析 神题啊不会. 具体证明看黄源河论文&l ...

  10. BZOJ1485: [HNOI2009]有趣的数列

    Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1<a3<…&l ...