首页 前端知识 jquery中关于hover()事件切换的延时处理

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

2024-09-01 23:09:38 前端知识 前端哥 519 11 我要收藏

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后隐藏
});

[1] ​​原文阅读​​

我是 Just,听说长的好看的都关注订阅号[ 设计师工作日常 ]了!skr~ skr~ skr~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17439.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!