$(function(){
$('.navmenu').mouseover(function(){
$(this).children("ul")./*slideDown(100);*/show();加入时间机会有BUG
})
})
$(function(){
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();//slideUp(100);
})
})
2016-03-26
这个特效产生闪动的bug原因是：由于容器使用了position的relative或者absolute导致，当然我们不用这个属性在布局的时候就会遇到很大麻烦，所以我自己研究了一种解决方案，即使用了position，又能解决闪动，研究jquery源码结果显示slideup这个函数内部调用的是animate这个动画函数，所以，我们不直接调用slideup这个特效，改成调用animate这个函数，当然直接改成调用animate也是有闪动现象，下面是最关键的一步：animate调用的时候增加一个透明的设置，例如：ulobj.animate({height: 'toggle', opacity: 'toggle'}, speed);其中opacity: 'toggle'就是设置透明渐变，这样等图形收起之后就变为完全透明，回闪那一下是透明的，所以就看不到了，我自己试过，非常完美，希望给大家带来帮助
如果跟教程中使用一样的事件就不会发生这样的问题了。即：
$(document).ready(function() {
/*改成mouseover的话会有bug*/
$('.top-nav li').mousemove(function() {
$(this).find('ul').slideDown('1000');
});
$('.top-nav li').mouseleave(function() {
$(this).find('ul').slideUp('slow');
});
});
细心的朋友一定会跟我一样，心想：为什么不是使用mouseover和mouseout呢？原因很简单，一定是因为mouseover和mousemove、mouseout和mouseleave存在着本质的差别，也导致着不同的结果。至于区别嘛。大概是mouseover进入元素时将触发一次事件，在元素内移动时不再触发。如果是moveleave的话进入元素再移动鼠标同样会再触发事件的（在元素内不停移动会不停触发）。moseout和mouseleave应该也是同样的道理。这里大概就能解释为什么改成mouseover就“一闪一闪”的原因了吧。当我们移入ul时，二级菜单显示，当我们想移动到二级菜单上的菜单项时，也相当于ul mouseout了一下，需要隐藏二级菜单。但是我们又移入了二级菜单的 li ，也就是这时也触发了 mouseover。大概大概就这样就“一闪一闪”了吧。（解释的有点不清不楚的，请见谅~~）
/*改成mouseover的话会有bug*/
$('.top-nav li').mouseover(function() {
console.log(1);
$(this).find('ul').slideDown('1000');
});
$('.top-nav li').mouseout(function() {
console.log(2);
$(this).find('ul').slideUp('slow');
});
举报
