clearTimeout与mouseover/mouseout 或mouseenter/mouseleave结合使用时无效或闪烁的解决方法亲测 原创 收藏


  • :
  • 12-09 20:54
  • :
  • 182次
  • :
  • 0条
  • 3赞

简介在clearTimeout与mouseover/mouseout 或mouseenter/mouseleave结合使用时会出现无效或闪烁的问题,本文主要讲的就是解决无效或闪烁的方法。

站长要实现这样一个效果:

在程序中弹出显示一个提示警告框,如果没有其它操作,会在3秒后消失,但当鼠标放上面后,会一直显示,但当鼠标移开后,就会重新计时,在3秒后消失。

这不是一个多复杂的效果,站长直接就开始动手写代码了:

var $info=$("#info");//这是弹出的提示警告框
var hiding;
$info.slideDown(200);//显示提示框

//下面这句是设置一个定时,三秒后收起提示框
hiding=setTimeout(function(){$info.slideUp(200);},3000);

//下面开始为提示框绑定鼠标mouseover和mouseout事件
//鼠标放上去时,用clearTimeout清除定时
$info.mouseover(function(){clearTimeout(hiding);});

//鼠标移开时,继续开始重新计时
$info.mouseout(function(){
    hiding=setTimeout(function(){$info.slideUp(200);},3000);
});

上面的代码,在逻辑上是没有问题的,但站长在测试时发现这样一个问题,提示框显示出来后,当鼠标放上去时,显示框会一直显示,但把鼠标移出再放上去,不会一直显示,而是会定时关闭。

出现这样的问题,站长一直找问题出现在哪,但一直找不到,其实站长还试着不用setTimeout,换成jquery里的delay方法,但测试的结果更差劲,这里不再叙述站长在这其中测试的具体经过了,直接附上解决方法:

var $info=$("#info");//这是弹出的提示警告框
var hiding;$info.slideDown(200);//显示提示框

//下面这句是设置一个定时,三秒后收起提示框
hiding=setTimeout(function(){$info.slideUp(200);},3000);

//下面开始为提示框绑定鼠标mouseover和mouseout事件
//鼠标放上去时,用clearTimeout清除定时
$info.mouseover(function(){clearTimeout(hiding);});

//鼠标移开时,继续开始重新计时
$info.mouseout(function(){
    clearTimeout(hiding);  //重点就是这一句 
    hiding=setTimeout(function(){$info.slideUp(200);},3000);
});

下面是站长提供的一个完整的在线实例演示:

搜索 clearTimeout与mouseover/mouseout结合使用的在线实例演示



您正在找的文章可能是: