为什么要停止动画？
对同一个元素，如果拥有一个以上的动画对其加以作用，那么后面的动画会被放入一个动画队列中。动画队列的动画是在其上一个动画完成以后才会执行。
控制两个参数四种情况
1、第一个参数表示后续动画是否要执行：true:后续动画不执行 ;false:后续动画会执行
2、第二个参数表示当前动画是否执行完：true:立即执行完成当前动画 ;false:立即停止当前动画
(1)、stop(true,true)后续动画不执行，立即执行完成当前动画
(2)、stop(false,true)后续动画会执行，立即执行完成当前动画
(3)、stop(true,false)后续动画不执行，立即停止当前动画
(4)、stop(false,false)后续动画会执行，立即停止当前动画
我们经常用的是第四种情况stop(false,false)后续动画会执行，立即停止当前动画，默认stop()===stop(false,false)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } ul { list-style: none; } .nav { padding-left: 10px; width: 330px; height: 30px; margin: 10px auto; background: url("images/bg.jpg"); } .nav li { background: url("images/libg.jpg"); } .nav > ul > li { float: left; margin-right: 10px; position: relative; } a { display: block; width: 100px; height: 30px; text-align: center; font: 400 15px/30px "simsun"; text-decoration: none; cursor: pointer; } .nav > ul > li > ul { position: absolute; top: 30px; display: none; } </style> <script src="jquery-1.11.1.js"></script> <script> $(function () { $(".nav>ul>li").mouseenter(function () { $(this).children("ul").stop(false, false).slideDown(); }); $(".nav>ul>li").mouseleave(function () { $(this).children("ul").stop(false, false).slideUp(); }); }); </script> </head> <body> <div class="nav"> <ul> <li> <a href="#">一级菜单</a> <ul> <li><a herf="#">二级菜单</a></li> <li><a herf="#">二级菜单</a></li> <li><a herf="#">二级菜单</a></li> <li><a herf="#">二级菜单</a></li> </ul> </li> <li> <a href="#">一级菜单</a> <ul> <li><a herf="#">二级菜单</a></li> <li><a herf="#">二级菜单</a></li> <li><a herf="#">二级菜单</a></li> <li><a herf="#">二级菜单</a></li> </ul> </li> <li> <a href="#">一级菜单</a> <ul> <li><a herf="#">二级菜单</a></li> <li><a herf="#">二级菜单</a></li> <li><a herf="#">二级菜单</a></li> <li><a herf="#">二级菜单</a></li> </ul> </li> </ul> </div> </body> </html>
