使用.animate({width:'hide'})隐藏时,元素会在消失之前闪烁,但仅限于Chrome

lem*_*n24 2 html javascript css jquery flicker

此问题出现在Chrome/Chromium上(在Linux和Windows上):当我使用JQuery隐藏元素时.animate({width: 'hide'}),元素会缩小,然后在几分之一秒内恢复到原始大小,然后立即消失.

我做了一个小提琴:http://jsfiddle.net/FyDWE/4/

在IE9和Firefox上,一切都按预期工作.

提前致谢!

Esa*_*ija 5

我无法提供解决方法(在你必须使用的情况下width: 'hide')但是当我编辑jQuery fx核心以在闪烁点返回时,我能够找到我认为是一个非常奇怪的浏览器错误.

这是jsfiddle:

http://jsfiddle.net/FyDWE/9/

当你离开鼠标时,动画将开始缩小,当它到达它结束时它会突然调整到完全.现在这是你的闪烁源,它因为jQuery编辑而停在那里.

如果你现在编辑.options span element动画的样式属性,你可以看到它display: inline-block; overflow-x: hidden; overflow-y: hidden; width: 0px;

现在,如果您更改width1px,(display: inline-block; overflow-x: hidden; overflow-y: hidden; width: 1px;)它将突然完全缩小.

所以我认为闪烁来自于:动画达到0px,这意味着如上面的jsfiddle中所示的chrome中的突然全尺寸,然后元素隐藏.当您在IE9中尝试链接的jsfiddle时,闪烁冻结状态即使是宽度也是正常的:0px没有像chrome那样的黑条.

编辑:

这是我的解决方法,如果没有使用的解决方案width: 'hide'是可行的:

http://jsfiddle.net/FyDWE/10/