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

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

slidedown和slideup 的重复滑动问题相关推荐

51 jQuery-使用slideDown()与slideUp()方法实现滑动效果
1.效果图 2.HTML代码 <!DOCTYPE html> <html> <head><meta charset="utf-8"> ...
问题：jq中只有slideDown()和slideUp()或者slideToggle()，想要左右滑动怎么办
闲话2 Q:jq中只有slideDown()和slideUp()或者slideToggle(),想要左右滑动怎么办 A:slideToggle()的原理就是通过改变元素的高度使得元素由上至下或反之进行 ...
jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
jQuery 滑动方法可使元素上下滑动. jQuery slideDown() 方法用于向下滑动元素. $(selector).slideDown(speed,callback); 可 ...
jQuery 效果 - 滑动 slideDown，slideUp，slideToggle的使用
//slideDown() 方法用于向下滑动元素 $(document).ready(function(){$(".flip").click(function(){$(" ...
利用css3实现jQuery中的slideDown和slideUp效果
最开始想要实现一个菜单从上向下滑出的效果,采用transition: translate 0.5s ease-in;总是觉得别扭的很,无意间看到小米官网的二级菜单从上向下滑出的效果,顿时觉得这样就不会 ...
# vue+JavaScript实现slideDown与slideUp效果
vue+JavaScript实现slideDown与slideUp效果整段代码如下代码片. // An highlighted block <template><div style ...
jQuery之动画系列(show、hide、fadeIn、fadeOut、fadeToggle、fadeTo、slideDown、slideUp、slideToggle)
文章目录 show 和 hide fadeIn 和 fadeOut fadeToggle fadeTo slideDown 和 slideUp slideToggle show 和 hide < ...
JQuery： slideDown与slideUp
HZY SlideDown和slideUp是JQuery中的方法 SlideDown是通过高度变化(向下增大)来动态地显示所有匹配的元素 SlideDown有三个参数 speed:动画时长的毫秒数值 ...
JS实现slideDown()和slideUp()效果
JS实现slideDown()和slideUp()效果这两天在写一个小Demo,页面顶部需要实现webAPP那种将导航收起,通过按钮点击显示与隐藏的效果.实现过程中也花费时间挺久的,现在单独将这部分 ...

slidedown和slideup 的重复滑动问题

slidedown和slideup 的重复滑动问题相关推荐

最新文章

热门文章