jquery - 阻止 jquery 事件处理程序几毫秒

Question

我正在创建一个导航菜单。但它仍然有点马车。我不知道如何完全微调它。以下是您可能有解决方案的问题。

1. 菜单(关于我 | 投资组合 | 博客 | 联系我)很容易触发，我的意思是即使非常快速的悬停也可以触发它们。我怎样才能将触发器(mouseenter)推迟几毫秒(比如说 200 毫秒)，这样徒劳的无目的的快速路过悬停就不会触发菜单工作，我的意思是，用户真的必须将鼠标悬停在菜单上至少 200 毫秒或者小于 200 毫秒菜单不会被触发？怎么办？

2. 子菜单(组合一 | 组合二)有时，当他们的 parent 徘徊时，其中一个已经离开，而另一个仍然不寒而栗。我想这是因为失败的容易触发的菜单 portolfio 悬停也影响了它的子项；因此我需要阻止菜单，这样它的子项就不会鲁莽和杂乱地淡入淡出。

非常感谢!

这是 fiddle 链接:https://jsfiddle.net/Herza/ut5nLdpa/

这是代码组合:

------------HTML--------------------

<nav id="menu">
    <ul>
        <li>
            <a href="#">
                <p>About Me</p>
                <div></div>
            </a>
        </li><!--
     --><li id="portfolio" >
            <a>
                <p>Portfolio</p>
                <div></div>
            </a>
            <ul>
                <li id="one-port">
                    <a href="#">Portfolio One</a>
                </li>
                <li id="two-port">
                    <a href="#" >Portfolio Two</a>
                </li>
            </ul>
        </li><!--
     --><li>
            <a href="#" >
                <p>Blog</p>
                <div></div>
            </a>
        </li><!--
     --><li>
            <a href="#" >
                <p>Contact Me</p>
                <div></div>
            </a>
        </li>
    <ul>    
</nav>

----------------CSS----------------

nav#menu .current {background-color: black; color: white;}
nav#menu > ul {margin: 0; padding: 0;}
nav#menu > ul > li {display: inline-block; list-style: none; position: relative;}
nav#menu > ul > li > a {text-decoration: none; display: block; padding: 0; height:  62px; width: 130px; text-align: center; font-family: "roboto-light"; line-height: 55px; color: black; font-size: 16px; cursor: pointer; overflow: hidden;}
nav#menu > ul > li > a > p {display: block; width: 100%; height: 62px; margin: 0; padding: 0; background-color: green;}
nav#menu > ul > li > a > div {display: block; width: 100%; height: 62px; margin: 0; padding: 0; background-color: black; background-image: url(https://lh3.googleusercontent.com/3mJFQFK6QV2X2RZHfDGruGeelc7R4KhigZliqmQKZQqRMdm13ZOR2ZPtBf3VMyagahrzA4gT3ZcB4VU=w1342-h479); background-size: auto; background-repeat: no-repeat; background-position: center center;}
nav#menu > ul > li > ul {position: absolute; left: 0px; padding: 0px; margin: 0px; width: 200px; height: 0px; background-color: white; display: block; }
nav#menu > ul > li > ul > li {list-style: none}
nav#menu > ul > li > ul > li > a {display: block; padding: 15px 10px 15px 35px; background-color: white; color: black; text-decoration: none; font-family: "roboto-light";  font-size: 16px; background-color: blue;}
nav#menu > ul > li > ul > li { position: absolute; width: 100%; border: 0; left: 100px; display: none;}
nav#menu > ul > li > ul > li#one-port {top: 0px; z-index: 36;}
nav#menu > ul > li > ul > li#two-port {top: 49px; z-index: 35;}
nav#menu > ul > li > ul > li#one-port > a {border-bottom: 1px solid black;}

-------------------- Jquery ------------------------ ------

$(document).ready(function(){

    $("nav > ul > li").mouseenter(function(){
        $(this).children("a").children("p").animate({margin: "-62 0 0 0"},300);
    })
    $("nav > ul > li").mouseleave(function(){
        $(this).children("a").children("p").animate({margin: "0 0 0 0"},300);
    })

    $("nav > ul > li#portfolio").mouseenter(function(){
        $(this).children("ul").contents().clearQueue(); 
        $(this).children("ul").children("li#one-port").delay(0).queue(function(){
            $(this).animate({left: "0"},{queue: false, duration: 400})
            $(this).fadeIn({queue: false, duration: 400});
            $(this).dequeue();
        })
        $(this).children("ul").children("li#two-port").delay(250).queue(function(){
            $(this).animate({left: "0"},{queue: false, duration: 400})
            $(this).fadeIn({queue: false, duration: 400});
            $(this).dequeue();
        })
    })

    $("nav > ul > li#portfolio").mouseleave(function(){ 
        $(this).children("ul").contents().clearQueue();                                         
        $(this).children("ul").children("li#one-port").delay(0).queue(function(){
            $(this).animate({left: "100"},{queue: false, duration: 400})
            $(this).fadeOut({queue: false});
            $(this).dequeue();
        })
        $(this).children("ul").children("li#two-port").delay(250).queue(function(){
            $(this).animate({left: "100"},{queue: false, duration: 400})
            $(this).fadeOut({queue: false});
            $(this).dequeue();
        })      
    })
})

Answer 1

我知道您已经找到了使用 hoverintent 插件的解决方案，这很好，但请允许我分享一个使用完全不使用 javascript 的解决方案，仅使用一些 css 转换。这有很多优点:

• 无需为您的 javascript 加载所有这些额外的 kB
• 会优雅地降级，即使没有 javascript 的用户也会看到相同的菜单
• css 转换得到更好的优化，这将提供更流畅的动画
• 你可以坚持cheap properties像 translate 和 opacity，不需要重绘。同样，性能要好得多。这也可以在 jQuery 中完成，但必须添加另一个允许您为 transform 属性设置动画的插件。

事不宜迟，this is what I came up with .我知道这不是一个精确的复制品，您将不得不稍微修改一下数字，但将其视为概念证明。实际代码非常简单:

HTML:

<nav>
    <ul>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Portfolio</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Digital Illustration</a></li>
            </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>   
</nav>

CSS:

/* general */
nav a {
    text-align: center;
    display: block;
    color: black;
    text-decoration: none;
    padding: 18px;
}
nav ul {
    list-style: none;
}

/* main menu */
nav > ul > li {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
nav > ul > li > a {
    background: green;
    overflow: hidden;
    position: relative;
}
nav > ul > li > a:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    transform: translate(0, 100%);
    transition: transform .4s .2s;
}
nav > ul > li:hover > a:after {
    transform: translate(0,0);
}

/* sub menu */
nav > ul > li > ul {
    position: absolute;
    top: 100%;
}
nav > ul > li > ul > li > a {
    white-space: nowrap;
    background: blue;
    transform: translate(100%, 0);
    opacity: 0;
    transition: transform .4s .3s, opacity .4s .3s;
}
nav > ul > li:hover > ul > li > a {
    transform: translate(0, 0);
    opacity: 1;
}

/* repeat this for each sub item you add, increasing the child 
   number (2) and adding .2s to the delay. Can be easily automated 
   with a css preprocessor like sass or less
*/
nav > ul > li > ul > li:nth-child(2) > a {
    transition-delay: .5s;
}

正如我所说，代码非常简单，但如果您需要我解释任何内容，请随时询问。