• 雪天寒冷 常州120一天多接到急救电话1118个 2018-07-18
  • 怀揣“警察梦” 盗贼专偷警用物品 2018-07-18
  • 创新人才教育研究会选举出第二届理事会理事 2018-07-18
  • 筽箌紈贰蟰贺礶羛甶Fantasia 2018-07-18
  • 三亚开通至保亭陵水3条城际旅游公交线路 20分钟发一班车 2018-07-18
  • 苹果AR新技术或让你生活大爆炸 这些公司已布局(股) 2018-07-18
  • 合众人寿阜阳中支因部分保单客户信息不真实被罚款10万元 2018-07-17
  • 顾客网购电视安装时发现屏裂 因已开箱无法正常退货 2018-07-17
  • 20多年未开口的央视女主播 在政协会上说了什么? 2018-07-17
  • 为什么只有韩国能生产大尺寸OLED?中国不行 2018-07-16
  • “高盐值”真面目 这些食品不咸也高盐 2018-07-16
  • 山西太原:出租车拟调价以应对网约车市场冲击 2018-07-15
  • 默勒镇多措并举全面打响生态环境保护攻坚战 2018-07-15
  • 去年广州专利申请量首破10万件 2018-07-15
  • 冬日浪漫礼遇 圣诞节游戏里“约“起来 2018-07-15
  • jQuery–鼠标经过(hover)事件的延时处理

    栏目: 编程语言 发布于: 2014-05-05 16:15:30

    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毫秒后弹出含有“经过我!”文字字样的弹出框。

    您可能感兴趣的文章

    • js屏蔽鼠标键盘事件(包括鼠标右键,方向键,退格键,F5刷新键等),兼容IE和firefox
    • jquery 模拟鼠标点击事件
    • jquery live change事件在IE下失效的解决方法
    • js实现点击enter键光标移到下一个输入框效果
    • 对用户传入的变量进行转义操作处理,摘自ecshop
    • JQuery中阻止事件冒泡方式及其区别
    • js如何判断鼠标滚轮是向下还是向上滚动
    • 程序员和测试员之间的经典对白。这些是国外程序员总结分享的,称其上全球通用?
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:jQuery–鼠标经过(hover)事件的延时处理
    IT技术书籍推荐:
    算法导论(原书第3版)
    算法导论(原书第3版)
    Thomas H.Cormen (作者), Charles E.Leiserson (作者), Ronald L.Rivest (作者), Clifford Stein (作者), 殷建平 (译者), 徐云 (译者), 王刚 (译者), 等 (译者)
    《算法导论(原书第3版)》内容简介:在有关算法的书中,有一些叙述非常严谨,但不够全面;另一些涉及了大量的题材,但又缺乏严谨性?!端惴ǖ悸?原书第3版)》将严谨性和全面性融为一体,深入讨论各类算法,并着力使这些算法的设计和分析能为各个层次的读者接受。全书各章自成体系,可以作为独立的学习单元;算法以英语和伪代码的形式描述,具备初步程序设计经验的人就能看懂;说明和解释力求浅显易懂,不失深度和数学严谨性。全书选材经典、内容丰富、结构合理、逻辑清晰,对本科生的数据结构课程和研究生的算法课程都是非常实用的教材,在IT专业人员的职业生涯中,《算法导论(原书第3版)》也是一本案头必备的参考书或工程实践手册。