首页 > 代码库 > 鼠标滑过下拉菜单抖动的问题 slideup/slidedown() 抖动问题
鼠标滑过下拉菜单抖动的问题 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(true).slideDown();$(this).children(‘dl‘).stop(true).slideUp();
鼠标滑过下拉菜单抖动的问题 slideup/slidedown() 抖动问题