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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
javascript call方法使用说明
Jan 11 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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 分页原理分析,大家可以看看
2009/12/21 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
PHP分页类集锦
2014/11/18 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
在windows系统中实现python3安装lxml
2016/03/23 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Pandas中resample方法详解
2019/07/02 Python
Python笔试面试题小结
2019/09/07 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
岗位职责风险点
2014/03/12 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
工作检讨书范文
2015/01/23 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android