jQuery中stop方法停止动画排队效果

css：

<style>
        .nav {
            margin: 0 auto;
        }
        
        .nav>li {
            list-style: none;
            float: left;
            width: 50px;
        }
        
        .nav>li a {
            border: 1px solid lightcyan;
        }
        
        .sub {
            padding-left: 0;
            display: none;
        }
        
        .sub>li {
            list-style: none;
        }
    </style>

html：

 <ul class="nav">
        <li>
            <a href="#">饺子</a>
            <ul class="sub">
                <li>面粉</li>
                <li>馅料</li>
                <li>包</li>
            </ul>
        </li>
        <li>
            <a href="#">油饼</a>
            <ul class="sub">
                <li>面粉</li>
                <li>面团</li>
                <li>炸</li>
            </ul>
        </li>
        <li>
            <a href="#">西瓜汁</a>
            <ul class="sub">
                <li>西瓜</li>
                <li>榨汁机</li>
                <li>压榨</li>
            </ul>
        </li>
    </ul>

js：

<script src="./js/jquery-2.1.4.min.js"></script>
    <script>
        $(function() {
            $('.nav>li').mouseenter(function() {
                $(this).children('.sub').stop();
                $(this).children('.sub').slideDown(800);
            })
            $('.nav>li').mouseleave(function() {
                $(this).children('.sub').stop();
                $(this).children('.sub').slideUp(800);
            })
        })
    </script>

看着复杂的话可以把 $(this).children(’.sub’)赋给一个值，对这个值操作可简化一部分代码