10.jQuery之停止动画排队stop方法（重点）

重点：stop，在实际项目中，这个细节很重要

     <style>
         * {
             margin: 0;
             padding: 0;
         }

         li {
             list-style-type: none;
         }

         a {
             text-decoration: none;
             font-size: 14px;
         }

         .nav {
             margin: 100px;
         }

         .nav>li {
             position: relative;
             float: left;
             width: 80px;
             height: 41px;
             text-align: center;
         }

         .nav li a {
             display: block;
             width: 100%;
             height: 100%;
             line-height: 41px;
             color: #333;
         }

         .nav>li>a:hover {
             background-color: #eee;
         }

         .nav ul {
             display: none;
             position: absolute;
             top: 41px;
             left: 0;
             width: 100%;
             border-left: 1px solid #FECC5B;
             border-right: 1px solid #FECC5B;
         }

         .nav ul li {
             border-bottom: 1px solid #FECC5B;
         }

         .nav ul li a:hover {
             background-color: #FFF5DA;
         }
     </style>
     <ul class="nav">
         <li>
             <a href="#">微博</a>
             <ul>
                 <li>
                     <a href="">私信</a>
                 </li>
                 <li>
                     <a href="">评论</a>
                 </li>
                 <li>
                     <a href="">@我</a>
                 </li>
             </ul>
         </li>
         <li>
             <a href="#">微博</a>
             <ul>
                 <li>
                     <a href="">私信</a>
                 </li>
                 <li>
                     <a href="">评论</a>
                 </li>
                 <li>
                     <a href="">@我</a>
                 </li>
             </ul>
         </li>
         <li>
             <a href="#">微博</a>
             <ul>
                 <li>
                     <a href="">私信</a>
                 </li>
                 <li>
                     <a href="">评论</a>
                 </li>
                 <li>
                     <a href="">@我</a>
                 </li>
             </ul>
         </li>
         <li>
             <a href="#">微博</a>
             <ul>
                 <li>
                     <a href="">私信</a>
                 </li>
                 <li>
                     <a href="">评论</a>
                 </li>
                 <li>
                     <a href="">@我</a>
                 </li>
             </ul>
         </li>
     </ul>
     <script>
         $(function () {
             $(".nav>li").hover(function () {
                 // stop 方法必须写到动画的前面
                 $(this).children("ul").stop().slideToggle();
             });
         })
     </script>