Как остановить выпадающее меню 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");
        }
    })