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>