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 相关文章推荐
HTML页面登录时的JS验证方法
May 28 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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解压tar.gz格式文件的方法
2016/02/14 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
Python学习小技巧之列表项的排序
2017/05/20 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
python如何输出反斜杠
2020/06/18 Python
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
自我检讨报告
2015/01/28 职场文书
护士自荐信范文
2015/03/25 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
python和anaconda的区别
2022/05/06 Python