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~