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 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
js使用ajax读博客rss示例
May 06 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
新手入门js闭包学习过程解析
Oct 08 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
MYSQL环境变量设置方法
2007/01/15 PHP
php在线生成ico文件的代码
2007/10/09 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
深入php之规范编程命名小结
2013/05/15 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
jQuery使用手册之一
2007/03/24 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
英语师范专业毕业生自荐信
2013/09/21 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
医院信息公开实施方案
2014/05/09 职场文书
质量安全标语
2014/06/07 职场文书
老公保证书怎么写
2015/02/26 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js
Python必备技巧之函数的使用详解
2022/04/04 Python