分享一个jquery插件,弥补一下hover事件的小小不足
2014-08-15 19:42
513 查看
hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件
应该设置一个时差来控制hover事件的触发
比如jd左边的菜单 你用鼠标瞬间划过他子菜单会弹出然后立即消失, 用户体验非常的不好.
易迅的菜单就没有这个问题
delayHover来解决这个问题
啥也不说了先看调用…………………………
调用方式:
duration表示延迟多少时间来触发hover事件
实现原理
设置一个定时器来开启hover事件
上代码
fnOver开启一个定时器
fnOuter关闭定时器
bug修复:
1.fnOuter每次都会执行(即使fnOver不执行)
2.duration对传入的值进行安全监测
完整代码
欢迎提bug
应该设置一个时差来控制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动态绑定事件插件livequery弥补live的不足
- 分享一个在线Word编辑的jQuery插件
- 分享一个JQuery弹出层插件
- 分享一个jQuery的全屏幻灯展示插件:Supersized 3.2
- 分享一个jQuery动态网格布局插件:Masonry
- 分享另外一个jQuery的超酷幻灯插件:jQuery Chop Slider 2.0
- 分享一个jQuery 客户端分页插件
- 分享一个超棒的免费jQuery幻灯插件:Nivo Slider
- 分享一个jQuery动态网格布局插件:Masonry
- 分享一个jQuery的全屏幻灯展示插件:Supersized 3.2
- 分享一个jQuery动态网格布局插件:Masonry
- GBin1分享:一个漂亮的jQuery页面内容导航插件 - Flexiable Nav
- 分享一个比lightbox配置更方便的web2.0图片显示jQuery插件:Topup
- 分享一个jQuery动态网格布局插件:Masonry
- 基于jquery的一个图片hover的插件
- GBin1分享:一个漂亮的jQuery页面内容导航插件 - Flexiable Nav 编辑
- 分享一个HTML5的上传jQuery插件 - jQuery HTML5 uploader
- 分享一个HTML5的上传jQuery插件 - jQuery HTML5 uploader
- 分享一个jQuery的时间轴插件:TimergliderJS
- 分享一个jQuery的时间轴插件:TimergliderJS