10.jQuery之停止动画排队stop方法（重点）
重点：stop，在实际项目中，这个细节很重要
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 7 li { 8 list-style-type: none; 9 } 10 11 a { 12 text-decoration: none; 13 font-size: 14px; 14 } 15 16 .nav { 17 margin: 100px; 18 } 19 20 .nav>li { 21 position: relative; 22 float: left; 23 width: 80px; 24 height: 41px; 25 text-align: center; 26 } 27 28 .nav li a { 29 display: block; 30 width: 100%; 31 height: 100%; 32 line-height: 41px; 33 color: #333; 34 } 35 36 .nav>li>a:hover { 37 background-color: #eee; 38 } 39 40 .nav ul { 41 display: none; 42 position: absolute; 43 top: 41px; 44 left: 0; 45 width: 100%; 46 border-left: 1px solid #FECC5B; 47 border-right: 1px solid #FECC5B; 48 } 49 50 .nav ul li { 51 border-bottom: 1px solid #FECC5B; 52 } 53 54 .nav ul li a:hover { 55 background-color: #FFF5DA; 56 } 57 </style> 58 <ul class="nav"> 59 <li> 60 <a href="#">微博</a> 61 <ul> 62 <li> 63 <a href="">私信</a> 64 </li> 65 <li> 66 <a href="">评论</a> 67 </li> 68 <li> 69 <a href="">@我</a> 70 </li> 71 </ul> 72 </li> 73 <li> 74 <a href="#">微博</a> 75 <ul> 76 <li> 77 <a href="">私信</a> 78 </li> 79 <li> 80 <a href="">评论</a> 81 </li> 82 <li> 83 <a href="">@我</a> 84 </li> 85 </ul> 86 </li> 87 <li> 88 <a href="#">微博</a> 89 <ul> 90 <li> 91 <a href="">私信</a> 92 </li> 93 <li> 94 <a href="">评论</a> 95 </li> 96 <li> 97 <a href="">@我</a> 98 </li> 99 </ul> 100 </li> 101 <li> 102 <a href="#">微博</a> 103 <ul> 104 <li> 105 <a href="">私信</a> 106 </li> 107 <li> 108 <a href="">评论</a> 109 </li> 110 <li> 111 <a href="">@我</a> 112 </li> 113 </ul> 114 </li> 115 </ul> 116 <script> 117 $(function () { 118 $(".nav>li").hover(function () { 119 // stop 方法必须写到动画的前面 120 $(this).children("ul").stop().slideToggle(); 121 }); 122 }) 123 </script>
