ClearTimeout消除闪动实例代码


Posted in Javascript onFebruary 29, 2016

定义和用法

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

语法

clearTimeout(id_of_settimeout)

参数 描述
id_of_settimeout 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

需求:当鼠标放到父级菜单上面的时候,显示下方的子菜单。鼠标从子菜单或者父级菜单上面移开的时候,子菜单要收起来。最终效果如下:

ClearTimeout消除闪动实例代码

PS:这样需求很常见,最常见的做法是li元素下面再嵌套一个Ul元素来包含子元素。这种做法用css就可以完全控制。但今天这个子菜单和导航栏是分开的。即到鼠标到产品上面的时候显示header-tags块。

<ul class="header-nav">
<li class="nav-item home"><a href="@Url.Action("Index", "Home")">首页</a></li>
<li class="nav-item products" id="header_tags">
<a href="#">产品<span class="icon-caret-down"></span></a>
....
</li>
</ul>
<div class="header-tags">
<ul>
<li>
<img class="screening-img-normal" src="~/Content/static/all.png">
<img class="screening-img-hover" src="~/Content/static/all1.png">
<p>全部</p>
</li>
<li tagid="4">
<img class="screening-img-normal" src="~/Content/static/shafa.png">
<img class="screening-img-hover" src="~/Content/static/shafa1.png">
<p>沙发</p>
</li>
<li tagid="3">
<img class="screening-img-normal" src="~/Content/static/zuoyi.png">
<img class="screening-img-hover" src="~/Content/static/zuoyi1.png">
<p>座椅</p>
</li>
....
</div>

这无法用css完全控制(hover只能控制子元素或兄弟元素)。

/*父子*/
#a:hover #b{display: block} 
/*兄弟*/
#a:hover + #b{display: block}

上面的情况就要用脚本了。这里涉及到#header_tags和.header-tags两个元素的移入移出。当鼠标移入#header_tags,.header-tags显示,当鼠标再移入.header-tags的时候不能立即触发#header_tags的moveout事件,而要保持tags继续显示。只有到鼠标从#header_tags和.header-tags离开后没有再进入才会把子菜单收起来。

$(function () {
var tagsTime;
$(document).on('mouseover mouseout', '#header_tags', function(event){
var $headerTagsBox = $('.header-tags');
if (event.type == 'mouseover') {
clearTimeout(tagsTime);
$headerTagsBox.slideDown(300);
}
else if (event.type == 'mouseout') {
tagsTime = setTimeout(function(){
$headerTagsBox.slideUp(200);
}, 200);
}
});
$('.header-tags').hover(function(){
clearTimeout(tagsTime);
},function(){
var $me = $(this);
tagsTime = setTimeout(function(){
$me.slideUp(200);
}, 200);
}); });

如果这里没有清除定时器和加上延时执行,导航栏就会不断的闪动。根本无法点击。

Javascript 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 #Javascript
jquery trigger函数执行两次的解决方法
Feb 29 #Javascript
理解js回收机制通俗易懂版
Feb 29 #Javascript
jquery trigger实现联动的方法
Feb 29 #Javascript
基于Javascript实现返回顶部按钮
Feb 29 #Javascript
JavaScript实现斗地主游戏的思路
Feb 29 #Javascript
jQuery取消特定的click事件
Feb 29 #Javascript
You might like
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
Python中强大的命令行库click入门教程
2016/12/26 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
python的sys.path模块路径添加方式
2020/03/09 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书