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);
        });    });

如果这里没有清除定时器和加上延时执行,导航栏就会不断的闪动。根本无法点击。

时间: 2024-11-08 12:25:52

clearTimeout消除闪动的相关文章

angular学习笔记,很乱哈哈。

1.鼠标悬浮出现的信息v-bind:title="message" 2.对该便签进行结果判断显示隐藏v-if=''控制台设置 app3.seen = false(消失).控制台设置 app3.seen = true(显示) 3.遍历数据动态生成列表v-for='属性 in data' 4.指令绑定一个监听事件用于调用v-on :click='执行函数' difine 第一 exports出口输出 require需求 seajs.use使用命令 config统一路径 alias简化路径

Java 双缓冲技术消除图片闪动

一般在使用Canvas组件刷新显示图片或者绘图的时候,会产生闪烁.这是由于机制是先使用背景色对原有内容进行覆盖,再往上面绘制新内容所引起的.我们看到的闪烁就是背景色和新内容之间的交替显示. 下面为Canvas中的update()方法的代码     public void update(Graphics g) {         g.clearRect(0, 0, width, height);         paint(g);     } 从上面可以看出,每当update的时候,首先用背景色对

【Espruino】NO.04 让灯自由闪动

http://blog.csdn.net/qwert1213131/article/details/26952811 本文属于个人理解,能力有限,纰漏在所难免,还望指正! [小鱼有点电] 上一节内容讲解了如何让LED小灯亮与灭,如果要实现闪烁的话,需要瞧很多代码,而且无法控制亮灭的时间间隔.本节,我们将采用两种方法,分别引入三个函数来分别实现闪烁功能,让控制更简单更准确. 第一种方法:通过延时函数来搞定 setTimeout()函数描述:在经过timeout个毫秒后执行function功能,返回

利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果

效果如图鼠标滑动导航  下边显示不同效果 html代码和css格式代码 <body> <div id="tab" class="tab"> <div class="tab-title" id="tab-title"> <ul> <li class="select" data-flag="0"><a href="#

JS制作闪动的图片

1 var t; 2 function showportal() { 3 if ($("#图片ID").is(":hidden")) 4 $("#图片ID").show(); 5 else 6 $("#portal").hide(); 7 t = setTimeout('showportal()', 300); 8 } 9 10 闪动: 11 showportal() ; 12 停止闪动: 13 clearTimeout(t)

JS setTimeout clearTimeout

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>计时器</title> </head> <script type="text/javascript"> var num=0; var i; fu

第一个app-进阶:1、让EditText屏蔽软键盘仍能光标闪动:2、EditText 的inputType参数类型(密码方式-隐藏显示、只允许输入数字等等)

EditText屏蔽软键盘后,光标消失问题 开始我有个需求:屏蔽系统软键盘 于是找到并使用这个方法: //edit_text1.setInputType(InputType.TYPE_NULL); //屏蔽软键盘弹出//edit_text2.setInputType(InputType.TYPE_NULL); //屏蔽软键盘弹出//edit_text3.setInputType(InputType.TYPE_NULL); //屏蔽软键盘弹出 让三个EditText都成功地没有软键盘弹出. 后来我

消除textarea的空格de长度值

在项目中因为用到文本域textarea输入textarea的长度总是显示 25 那是还怀疑textarea自带有value长度? placeholder属性的长度? 那时候想到类似:ul无序列表li元素浮动float 运用css属性添加:font-size:0;消除那间隔!可是, 一试用不对劲,直接把文本域的文字也font-size:0,字体都无法显示了,真是奇怪??? 按道理 标签的间 #text 文本节点 不是合并成一个空格的?为何textarea这么神奇 ,还25个? 后来,只有乖乖用缩进

【转】消除左递归

转自:http://guanjy0129.blog.163.com/blog/static/111549445201061491810507/ 一个文法含有下列形式的产生式之一时: 1)A→Aβ,A∈VN,β∈V* 2)A→Bβ,B→Aα,A.B∈VN,α.β∈V* 则称该文法是左递归的. 然而,一个文法是左递归时,不能采取自顶向下分析法. 消除左递归方法有: a)把直接左递归改写为右递归: 设有文法产生式:A→Aβ|γ.其中β非空,γ不以A打头. 可写为:A→γA' A'→βA'|ε 一般情况