jquery - 如何停止下拉菜单，jQuery？

Question

我确实对这个下拉菜单进行了研究。下面是代码。

HTML:

<div id="top_nav">
    <ul class="nav">
        <li><a href="#">Menu One</a>
            <ul>
                <li><a href="#">The Quick</a></li>
                <li><a href="#">Brown Fox</a></li>
                <li><a href="#">Jumps Over</a></li>
                <li><a href="#">The Lazy</a></li>
                <li><a href="#">Dog</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Two</a>
            <ul>
                <li><a href="#">The Quick</a></li>
                <li><a href="#">Brown Fox</a></li>
                <li><a href="#">Jumps Over</a></li>
                <li><a href="#">The Lazy</a></li>
                <li><a href="#">Dog</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Three</a></li>
        <li><a href="#">Menu Four</a>
            <ul>
                <li><a href="#">The Quick</a></li>
                <li><a href="#">Brown Fox</a></li>
                <li><a href="#">Jumps Over</a></li>
                <li><a href="#">The Lazy</a></li>
                <li><a href="#">Dog</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS:

#top_nav { width: 700px; margin: 20px auto 0 auto }
    .nav { font-family: Arial, Helvetica, sans-serif; font-size: 14px }
    .nav > li { float: left; margin-right: 7px; list-style: none; position: relative }
    .nav > li > a { height: 30px; line-height: 30px; padding: 0 15px; background-color: red; color: white; text-decoration: none; display: block }
    .nav > li > a:hover { background-color: blue }
    .nav > li > ul { background-color: brown; position: absolute; width: 120px; padding: 0; list-style: none; display: none }
    .nav > li > ul li a { color: white; text-decoration: none; padding: 7px; display: block }
    .nav > li > ul li a:hover { background-color: yellow; color: red }

和 jQuery 代码:

$(".nav > li").mouseover(function(){
        $(this).find("> a").css("background-color", "blue");
        $(this).find("ul").fadeIn(500);
    })
    $(".nav > li").mouseleave(function(){
        if($(this).children().size() > 1){
            $(this).find("ul").fadeOut(200, function(){
                $(this).prev().removeAttr("style");
            });
        } else {
            $(this).find("> a").removeAttr("style");
        }
    })

正如你所看到的。下拉效果显示流畅。但是，当用户尝试从左向右更快地移动鼠标并选择所有顶部列表菜单时，即使没有必要，下拉效果也会继续完成。

jQuery 中缺少什么代码？

感谢您的帮助。

Answer 1

尝试

$(".nav > li").mouseover(function(){
        $(this).find("> a").css("background-color", "blue");
        $(this).find("ul").stop().fadeIn(500);
    })
    $(".nav > li").mouseleave(function(){
        if($(this).children().size() > 1){
            $(this).find("ul").stop().fadeOut(200, function(){
                $(this).prev().removeAttr("style");
            });
        } else {
            $(this).find("> a").removeAttr("style");
        }
    })