jquery的slideUp、slideDown在IE中的闪动bug

要是我再不写,对不起国家对不起党啊。也对不起ucdchina给我的链接。指点江山的文字就不必多说了,大家都知道没什么实际用处。BOSS开会说,管理人员不下一线直接操作是不能够发现的问题的。所以最近做了一段时间编辑,也做了一些图片,这2天又回归到前端。算是重新对自己锻炼吧。

可能做前端的同学都会遇到制作下拉菜单。以前的做法是利用hover属性来对另外一个隐藏容器做display的变化。随着js不断被认知,jquery丰富的函数库。前端也可以做出有一定效果的下拉菜单。那么用到比较多的就是slideup以及有关的slideDown。

不过在真正制作的时候会出现一些问题,我也遇到了。在IE下,特别是IE6下面体现十分诡异的效果。就是鼠标放在菜单上,下拉菜单自动不停的上下滑动,十分讨厌。到网上搜了下资料,说是这问题是由于容器使用了position的relative或者absolute导致。解决方法只有一种:不用position定位

鉴于项目本身的要求,不可能不用position定位(原因极其复杂)。因此所谓的解决方案是不存在的,于是我猜测异常情况是由于position定位造成容器的渲染顺序或layout造成的。后来我尝试用zoom:1来触发容器的hasLayout,问题解除了。

目前的解决方案也只是我的猜测,存在一定的运气和偶然,如果有同学遇到类似的问题,我们可以深入研究一下。

jquery的slideUp、slideDown在IE中的闪动bug》上有5条评论

  1. dq

    我在chrome下也出现了这种问题,后来使用click触发出现,点击别处出发消失解决的问题。
    我觉得原因是触发层必须全部包裹菜单层。

  2. 愆伏 文章作者

    触发层未必包裹菜单层,问题可能出在触发区域和显示区域的重叠。事件在处理时候会产生重复触发,导致闪烁。这篇文章是10年写的,可能现在jquery的事件处理和动画均已升级,也许去stackoverflow上面可以找到更好的解决方案。

发表评论

电子邮件地址不会被公开。