slidedown和slideup 的重复滑动问题

在很多PC端网站上，会有鼠标滑过nav展示二级菜单的需求，这种情况用slidedown和slideup是比较符合的。

如果是点击事件的话，是比较简单的，但是在鼠标滑过的问题上，要稍微复杂一点。

在于mouseenter和mouseover上，建议用mouseenter。

mouseenter的选定区域是本元素，而mouseover也会包括它的子元素区域。

mouseenter所对应的为mouseleave。

下面说一个实例。

    <nav class="pc_nav left">
      <ul class="">
       <li class="nav_li">
        <a href="index.html" class="nav_a">首页</a>
       </li>
       <li class="nav_li ">
        <a href="product.html" class="nav_a">全系产品</a>
        <ol class="setNav">
         <li>
          <a href="singleProduct.html">主网络交换机</a>
         </li>
         <li>
          <a href="router.html">路由器</a>
         </li>
         <li>
          <a href="#">全系产品</a>
         </li>
        </ol>
       </li>
       <li class="nav_li">
        <a href="Integration.html" class="nav_a">集成与运维</a>
        <ol class="setNav">
         <li>
          <a href="#">集成与运维</a>
         </li>
         <li>
          <a href="#">集成与运维</a>
         </li>
         <li>
          <a href="#">集成与运维</a>
         </li>
        </ol>
       </li>
       <li class="nav_li">
        <a href="solve.html" class="nav_a">解决方案</a>
        <ol class="setNav">
         <li>
          <a href="#">解决方案</a>
         </li>
         <li>
          <a href="#">解决方案</a>
         </li>
         <li>
          <a href="#">解决方案</a>
         </li>
        </ol>
       </li>
       <li class="nav_li actives">
        <a href="about.html" class="nav_a">关于英迈</a>
        <ol class="setNav">
         <li>
          <a href="ingramTeam.html">英迈团队</a>
         </li>
         <li>
          <a href="#">关于英迈</a>
         </li>
         <li>
          <a href="#">关于英迈</a>
         </li>
        </ol>
       </li>
       <li class="nav_li">
        <a href="news.html" class="nav_a">新闻资讯</a>
        <ol class="setNav">
         <li>
          <a href="#">新闻资讯</a>
         </li>
         <li>
          <a href="#">新闻资讯</a>
         </li>
         <li>
          <a href="#">新闻资讯</a>
         </li>
        </ol>
       </li>
       <li class="nav_li">
        <a href="contact.html" class="nav_a">联系我们</a>
        <ol class="setNav">
         <li>
          <a href="#">联系我们</a>
         </li>
         <li>
          <a href="#">联系我们</a>
         </li>
         <li>
          <a href="#">联系我们</a>
         </li>
        </ol>
       </li>
      </ul>
      <div class="clear"></div>
    </nav>

.nav_li {
	float: left;
	position: relative;
	padding: 0 38px;
}

.nav_li .nav_a {
	color: #555555;
	font-size: 18px;
}

.nav_li .setNav {
	position: absolute;
	top: 110px;
	width: 150px;
	left: 50%;
	margin-left: -75px;
	background: #fff;
	display: none;
	z-index: 100;
}

.nav_li .setNav a {
	display: block;
	color: #00a0e6;
	transition: all 0.3s;
	font-size: 16px;
	line-height: 20px;
	padding: 10px 0;
	text-align: center;
}

.nav_li .setNav a:hover {
	background: #00a0e6;
	color: #fff;
}

$('.pc_nav').on('mouseenter','.nav_li',function(){
     $(this).addClass("active");
            $(this).find('.setNav').stop(true,true).slideDown(400);
          }).on('mouseleave','.nav_li',function(){
     $(this).removeClass("active");
             $(this).find('.setNav').stop(true,true).slideUp(400);
 });

stop() 是必须要写的，否则就会出现鼠标多次滑过目录，而导致在鼠标离开目录后还会执行很多次动画，

而我想要的是鼠标离开后动画停止，在我再次滑过的时候再执行动画，所以需要在动画开始和结束时都结束一下此动画。

之前写的js是没有红字的true的，偶尔会出现多次滑动之后 slidedown 的元素高度会变得越来越小，这个原因我暂时还不知道。

但是在查阅资料之后找到了这个解决方法。在stop()方法里添加 true 这个参数。

W3School上是这样的说明的：stop(stopAll,goToEnd)；

在我看来 第一个参数表示停止当前元素的动画还是所有元素的动画，根据需求我需要的是停止所有动画，所以第一个参数为true。

第二个参数是表示当前动画要不要执行完毕后停止，我也选择了true，让动画执行完毕后在关闭，避免动画执行到一般停止，自我认为这样展示会更顺眼一些。

此为我第一篇博客，首要意义在于总结，次要在于分享。