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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 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递归调用与静态变量使用
2012/12/16 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
brook javascript框架介绍
2011/10/10 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
python自定义时钟类、定时任务类
2021/02/22 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
初中英语教学反思
2014/01/25 职场文书
计算机学生求职信范文
2014/01/30 职场文书
授权委托书怎么写
2014/04/03 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书