鼠标滑过下拉菜单抖动的问题 slideup/slidedown() 抖动问题以及背景透明问题

<script type="text/javascript">
　　$('li').children('dl').css({'margin': '0','display' :'none'})
　　$('li').mouseover(function(){
　　　　$(this).children('dl').slideDown();
　　});
　　$('li').mouseout(function(){
　　　　$(this).children('dl').slideUp();
　　});
</script>

当a标签没有display：block的情况下（主要是看a标签又没有占满li宽度和高度，因为mouse事件是给li的），当放到a标签的时候下拉菜单slideDown两次，中间有一次slideUp；若鼠标横向移动离开a标签但是没有移除li标签的范围；下拉菜单发生一次sildeUp和一次slideDown；当鼠标下移，移到下拉菜单上的时候，下拉菜单会无限次的slideDown与silideUp；

                当a标签display：block时，a标签占满了li的宽度，鼠标放到a上时下拉菜单一次sildeDown（正常效果）；鼠标下移到下拉菜单上时，下拉菜单还是会无限次的slideDown与silideUp；

多次发生slideDown与sildeUp的情况主要是因为 mouse事件问题：

mouseover与mouseenter

　　不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

　　只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave

　　不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

　　只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

 

触发事件的顺序：li标签的mouseout→slideUp一次；

　　　　　　　　　　　　　　　　　　　　slideUp是个过程需要时间，但是mouseout与mouseover瞬间发生；下拉菜单还没有sildeUp完成鼠标已经触发了下拉菜单的mouseover；

　　　　　　　　　　　　　　　　　　　　下拉菜单的mouseover→slideDown一次；

　　　　　　　　　　　　　　　　　　　　就这样事件多次被触发（火狐下是无限触发）；

解决：可以用jq的stop方法阻止动画；写法简单；

　　　　　　　　2：可以从事件触发的角度解决。

$(this).children('dl').stop(false,true).slideDown();$(this).children('dl').stop(false,true).slideUp();

背景透明解决：

$(this).children('dl').stop(false,true).slideDown();$(this).children('dl').hide();

转载于:https://www.cnblogs.com/wolflower/p/6888780.html