jquery中关于hover()事件切换的延时处理

之前写的一个静态官方营销站，网站主要用的jquery框架，写的一些鼠标交互效果。

有兴趣的可以访问一下，看一下整体的交互效果，移动端也做了适配，不过电脑端交互体验更好，​​点击访问官网。​​

1、hover()初始代码片段

在code过程中，常常用到hover()这个事件，直接套用代码片段，写的是：鼠标悬停内容滑出，鼠标离开内容隐藏的效果。

$('.info-hover').hover(
function(){
  $(this).next('.info-main').slideDown(300);
},
function(){
  $(this).next('.info-main').slideUp(300);
});

但是在浏览器中运行后，鼠标快速移入、移出时，会不停的有弹出隐藏弹出隐藏，体验不好。

浏览器中运行效果：

2、优化体验后代码片段

优化体验，加入延迟效果，需要用到setTimeout()，优化后代码如下：

let hover_time, out_time; // 定义悬停和离开的延时量
$('.info-hover').hover(
function(){
    clearTimeout(out_time); // 清除离开的延时
    hover_time = setTimeout(function(){
      $(this).next('.info-main').slideDown(300); // 300ms内滑出内容
    },300); // 定时鼠标悬停300ms后滑出
},function(){
    clearTimeout(hover_time); // 清除悬停的延时
    out_time = setTimeout(function(){
      $(this).next('.info-main').slideUp(300); // 300ms内隐藏内容
    },100); // 定时鼠标离开100ms后隐藏
});

上面的代码片段，其实就是设定鼠标移入悬停后多长时间显示内容，鼠标离开后多长时间隐藏内容。

但是在浏览器运行后，发现内容无法滑出。

浏览器中运行效果：

3、重定指针，最终代码片段

调试后发现是this指针的问题，this在setTimeout内无效，所以就在hover()内给this重定指针，

let hover_time, out_time; // 定义悬停和离开的延时量
$(".info-hover").hover(
function(){
    clearTimeout(out_time); // 清除离开的延时
    that = this; // 重定this指针
    hover_time = setTimeout(function(){
      $(that).next('.info-main').slideDown(300); // 300ms内滑出内容
    },300); // 定时鼠标悬停300ms后滑出
},function(){
    clearTimeout(hover_time); // 清除悬停的延时
    that = this; // 重定this指针
    out_time = setTimeout(function(){
      $(that).next('.info-main').slideUp(300); // 300ms内隐藏内容
    },100); // 定时鼠标离开100ms后隐藏
});

然后浏览器运行，效果完美。

浏览器中运行效果：

最终实际代码如下

let hover_time, out_time; // 定义悬停和离开的延时量
$(".info-hover").hover(
function(){
    clearTimeout(out_time); // 清除离开的延时
    that = this; // 重定this指针
    hover_time = setTimeout(function(){
      $(that).next('.info-main').slideDown(300); // 300ms内滑出内容
    },300); // 定时鼠标悬停300ms后滑出
},function(){
    clearTimeout(hover_time); // 清除悬停的延时
    that = this; // 重定this指针
    out_time = setTimeout(function(){
      $(that).next('.info-main').slideUp(300); // 300ms内隐藏内容
    },100); // 定时鼠标离开100ms后隐藏
});

---

51cto / 公众号「 设计师工作日常 」，点赞关注。