jquery鼠标经过延时处理

jquery鼠标经过延时处理

在jquery实际开发中，我们有时会用到鼠标经过显示隐藏层这样的效果，其实这种效果随处可见，在jquery中有一个hover事件可以完成类是效果，代码很简单，如下：

$(document).ready(function(){

$("选择器").hover(function(){

//鼠标经过需要执行的事件

},function(){

//鼠标离开需要执行的事件

})

虽然代码SO EASY,但是如果你用的是滑上，滑下的这种动画效果的话，鼠标来回滑动，就会出现事件多次响应，那效果，不懂的人还以为是动画片呢，其实这并不是我们想要的结果，况且这对于用户体验也不好，所以我们就引出了延时的概念，原理是，只要在一个时间的范围内，我就响应这个事件，当然这个时间不能太长，不然用户早就离开，还响应的屁呀。。

废话不多说，直接上代码。。

$(document).ready(function(){
var mouseover_tid = [];
var mouseout_tid = [];
$("#nav").hover(function(index){
// 鼠标进入
var _self = this;
// 停止卷起事件
clearTimeout(mouseout_tid[index]);//当鼠标经过的时候，我先停止鼠标离开的动作
// 当鼠标进入超过 0.2 秒, 展开菜单, 并记录到线程 ID 中
mouseover_tid[index] = setTimeout(function() {
jQuery(_self).find(".list").slideDown('fast');
}, 400);
},function(index){
var _self = this;
// 停止展开事件
clearTimeout(mouseover_tid[index]);
// 当鼠标离开超过 0.2 秒, 卷起菜单, 并记录到线程 ID 中
mouseout_tid[index] = setTimeout(function() {
jQuery(_self).find(".list").slideUp('fast');
}, 400);
})
效果请参见http://www.jiaoben8.cn/Specia-id111.html