slidedown和slideup 的重复滑动问题

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

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

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

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

mouseenter所对应的为mouseleave。

下面说一个实例。

    

      

       

        首页
       
       

        全系产品
        

         

          主网络交换机
         
         

          路由器
         
         

          全系产品
         
        
       
       

        集成与运维
        

         

          集成与运维
         
         

          集成与运维
         
         

          集成与运维
         
        
       
       

        解决方案
        

         

          解决方案
         
         

          解决方案
         
         

          解决方案
         
        
       
       

        关于英迈
        

         

          英迈团队
         
         

          关于英迈
         
         

          关于英迈
         
        
       
       

        新闻资讯
        

         

          新闻资讯
         
         

          新闻资讯
         
         

          新闻资讯
         
        
       
       

        联系我们
        

         

          联系我们
         
         

          联系我们
         
         

          联系我们
         
        
       
      
      

    

.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，让动画执行完毕后在关闭，避免动画执行到一般停止，自我认为这样展示会更顺眼一些。

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