ClearTimeout消除闪动实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了ClearTimeout消除闪动实例代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2247字,纯文字阅读大概需要4分钟。
内容图文
![ClearTimeout消除闪动实例代码](/upload/InfoBanner/zyjiaocheng/354/9b9dba6fe7a4472c82cecce212deac21.jpg)
定义和用法
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
语法
clearTimeout(id_of_settimeout)
参数 | 描述 |
---|---|
id_of_settimeout | 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。 |
需求:当鼠标放到父级菜单上面的时候,显示下方的子菜单。鼠标从子菜单或者父级菜单上面移开的时候,子菜单要收起来。最终效果如下:
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); }); });
如果这里没有清除定时器和加上延时执行,导航栏就会不断的闪动。根本无法点击。
内容总结
以上是互联网集市为您收集整理的ClearTimeout消除闪动实例代码全部内容,希望文章能够帮你解决ClearTimeout消除闪动实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。