hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件

应该设置一个时差来控制hover事件的触发

比如jd左边的菜单 你用鼠标瞬间划过他子菜单会弹出然后立即消失, 用户体验非常的不好.

易迅的菜单就没有这个问题

delayHover来解决这个问题

啥也不说了先看调用…………………………

调用方式:

var duration = 500;// 延迟500毫秒

$('#div1').delayHover(function () {

     $(this).css('background', '#ccc');

}, function () {

     $(this).css('background', '#000');

}, duration)

duration表示延迟多少时间来触发hover事件

实现原理

设置一个定时器来开启hover事件

上代码

$.fn.delayHover = function (fnOver, fnOuter, duration) {

    var _this = this

    var timerOut; //开启hover的定时器

    $(this).hover(function () {

        timerOut = setTimeout(function () {

            fnOver.call(_this);

        }, duration)

    }, function () {

        clearTimeout(timerOut)

        fnOuter.call(_this);;

    })

}

fnOver开启一个定时器

fnOuter关闭定时器

bug修复:

1.fnOuter每次都会执行(即使fnOver不执行)

2.duration对传入的值进行安全监测

; (function ($) {

    $.fn.delayHover = function (fnOver, fnOut, duration) {

        var _this = this;

        var timeouter;

        var defaultDuration = 500;//默认500 毫秒

        var fnOver_Running = false;  //函数已经执行

        //重置duration

        if (typeof duration != "number" ||//不是字符串

            isNaN(duration) || //NaN

            duration < 0) { //非法值

            duration = defaultDuration;

        }

        $(_this).hover(function (event) {

            timeouter = setTimeout(function () {

                fnOver_Running = true;

                fnOver.call(_this, event)

            }, duration);

        }, function (event) {

            clearTimeout(timeouter);

            if (fnOver_Running) {

                fnOver_Running = false;

                fnOut.call(_this, event);

            }

        });

        return $(this);

    }

})(jQuery);

完整代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

    <style>

        .hover {

            background: #000;

            color: #fff;

        }

    </style>

    <script>

        ; (function ($) {

            $.fn.delayHover = function (fnOver, fnOut, duration) {

                var _this = this;

                var timeouter;

                var defaultDuration = 500;//默认500 毫秒

                var fnOver_Running = false;  //函数已经执行

                //重置duration

                if (typeof duration != "number" ||//不是字符串

                    isNaN(duration) || //NaN

                    duration < 0) { //非法值

                    duration = defaultDuration;

                }

                $(_this).hover(function (event) {

                    timeouter = setTimeout(function () {

                        fnOver_Running = true;

                        fnOver.call(_this, event)

                    }, duration);

                }, function (event) {

                    clearTimeout(timeouter);

                    if (fnOver_Running) {

                        fnOver_Running = false;

                        fnOut.call(_this, event);

                    }

                });

                return $(this);

            }

        })(jQuery);

    </script>

    <script>

        $(function () {

            $('#hovertest').hover(function () {

                console.log('指向');

                $(this).addClass('hover');

            },

            function () {

                console.log('离开');

                $(this).removeClass('hover');

            });

            $('#delayHover').delayHover(function () {

                console.log('指向');

                $(this).addClass('hover');

            }, function () {

                console.log('离开');

                $(this).removeClass('hover');

            }, 500);

            $('#delayHover1').delayHover(function () {

                console.log('指向');

                $(this).addClass('hover');

            }, function () {

                console.log('离开');

                $(this).removeClass('hover');

            }, 3000);

        })

    </script>

</head>

<body>

    <h1>

        hover事件有一个缺点:不能延时显示<br />

        <i>delayHover</i>解决了这个问题

    </h1>

    <div id="hovertest" style="border:1px solid #ccc;  ">

        这个是hover事件 指向我看看效果

    </div>

    <div id="delayHover" style="margin-top:100px;">

        这个是delayHover事件 指向我看看效果  默认值500毫秒

    </div>

    <div id="delayHover1" style="">

        这个是delayHover事件 指向我看看效果 延迟3000毫秒

    </div>

</body>

</html>

欢迎提bug

分享一个jquery插件,弥补一下hover事件的小小不足的更多相关文章

  1. 你真的需要一个jQuery插件吗

    jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...

  2. Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  3. 做了一个jquery插件，使表格的标题列可左右拉伸

    示例下载 插件名称命名为:jquery.tableresize.js,代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件,能够使table ...

  4. 如何写一个jquery插件

      本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...

  5. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

  6. 开发一个jQuery插件——多级联动菜单

    引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...

  7. 我的第一个jquery插件：下拉多选框

    <!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...

  8. 如何去定义一个jquery插件

    扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方 ...

  9. 自己实现一个jQuery插件

    <script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script> ...

随机推荐

  1. docker容器互联 (.net core容器，mysql容器)

    背景 有两个容器一个运行的.net core的项目 另一个运行的mysql的数据 并且这两个容器在同一个机子上(或者局域网),那么理论上.net core的项目去访问mysql是可以走内网的 但是容器 ...

  2. IDEAL葵花宝典：java代码开发规范插件 GenerateAllSetter、ECtranslation、translation、插件

    前言:  GenerateAllSetter: 我们在程序开发过程中,往往要编写这样的类:类的部分或者全部属性不希望让外部世界直接访问,而不用public字段修饰.这样,方法调用成了访问这些属性的唯一 ...

  3. 第108天：Ajax中XMLHttpRequest详解

    在Ajax应用程序中,XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器返回的响应信息和数据. XMLHttpRequest可以提供不重新加载页面的情况下更新网页, ...

  4. 牛客网——G送分了（py）

    链接:https://www.nowcoder.net/acm/contest/74/G来源:牛客网 题目描述 杭州人称傻乎乎的人为62,而嘟嘟家这里没有这样的习俗. 相比62,他那里的人更加讨厌数字 ...

  5. mysqli使用记录

    1.批量插入数据insert 方式一:insert into tableName (id,name,age) values ('1','张三','12'),('2','李四','16'),('3',' ...

  6. wikioi 1028 花店橱窗布置 最大权匹配

    中文题意不描述. 链接:http://wikioi.com/problem/1028/ 这题一开始很裸的最大权二分匹配.但是原来没有接触过,KM的这个最大权不大会.然后一开始以为用最大费用最大流直接就 ...

  7. bzoj1073

    题意: k短路 题解: A* 当然是抄了zzd的代码 然而需要特判 为什么把bool改成int爆空间!!! 代码: #include<bits/stdc++.h> using namesp ...

  8. bzoj1025

    题意: 找环 有多少种不同的排列 使排列数目为n 题解: 考虑dp f[i][j]表示前i个质数,和为j的方案数 然后转移一下即可 代码: #include<bits/stdc++.h> ...

  9. docker把web jar包制作成镜像

    1.新建一个spring boot项目 并使用maven打成jar包,放到linux(centos7)环境上. 运行 java -jar hello.jar  后结果如下(这里项目对外提供的端口是90 ...

  10. java基础11天

    冒泡排序 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处,第二次比较厚,最大值放在了倒数第二的位置,一直到第二个元素确定了,整个数组的顺序也就确定了 public class Ar ...