您的位置：首页 > Web前端 > JQuery

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

2014-08-15 19:42 477 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航