ClearTimeout消除闪动实例代码_javascript技巧
程序员文章站
2022-04-29 11:48:04
...
定义和用法
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
语法
clearTimeout(id_of_settimeout)
参数 | 描述 |
---|---|
id_of_settimeout | 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。 |
需求:当鼠标放到父级菜单上面的时候,显示下方的子菜单。鼠标从子菜单或者父级菜单上面移开的时候,子菜单要收起来。最终效果如下:
PS:这样需求很常见,最常见的做法是li元素下面再嵌套一个Ul元素来包含子元素。这种做法用css就可以完全控制。但今天这个子菜单和导航栏是分开的。即到鼠标到产品上面的时候显示header-tags块。
这无法用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实现新闻滚动效果(实例代码)_javascript技巧
-
jQuery实现可收缩展开的级联菜单实例代码_javascript技巧
-
js 文本滚动效果的实例代码_javascript技巧
-
JS将表单导出成EXCEL的实例代码_javascript技巧
-
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)_javascript技巧
-
Javascript中3种实现继承的方法和代码实例_javascript技巧
-
javascript模拟地球旋转效果代码实例_javascript技巧
-
JavaScript代码简化技巧实例解析
-
Javascript实现动态菜单添加的实例代码_javascript技巧
-
js控制不同的时间段显示不同的css样式的实例代码_javascript技巧