使用jQuery动画宽度时出现奇怪的"抖动"效果(仅限Chrome!)

Question

我li在一段简单的代码片段中使用jQuery 来动画元素的宽度.我正在使用它hover()作为处理程序并.animate()为宽度设置动画.这是我的代码.

$('li').each(function() {
    //store the original width of the element in a variable
    var oldWidth = $(this).width();
    $(this).hover(
        function() {
            //when the mouse enters the element, animate width to 900px
            $(this).animate({width: '900px'}, 600, 'linear')
        },
    function() {
            //when the mouse leaves, animate back to the original width
            $(this).animate({width: oldWidth}, 350, 'linear')
        }
   );
}); 

代码非常简单,但在Chrome中有一个奇怪的怪癖.当动画元素进出时,li元素会"摇晃",好像它们真的很冷,并且在颤抖.你可以在一个实例中看到这里的行为:http://missmd.org/(编辑:bug现已修复)

我之前使用jQuery动画了很多东西,从未见过这种行为.有没有解释它为什么会发生以及我如何解决它？我想知道是不是因为我已将元素向右浮动并向左侧动画.这个错误很令人抓狂,并且总体上对整个演示文稿有很大的影响(至少对我而言).之前有人见过这个吗？

编辑以澄清:它不是li"颤抖"它的内部文本的实际元素,当动画运行时,它会轻微地从左到右显着摇晃.我很难过.

编辑二:现在稍微摆弄CSS后我只能在Chrome中重现效果(对我来说是21.0.1180.60 beta-m).在Firefox中它按预期工作.它在IE中也很有用.非常具有讽刺意味的是Chrome(通常很棒这个东西)现在给我带来了麻烦.拉出头发,检查理智

这是我的HTML帮助深究这一点.我们在ChrisFrancis的'jsFiddle中重现了这个问题.

<nav>
    <ul class="nav">
        <li class="one">
            <a href="homeandnews/">
                <span class="title">Home and News</span>
                <br/>
                <span class="subtitle">Learn more about me and read general updates!</span>
            </a>
        </li>
    </ul>
<nav>

我完全难过了.这也可能是Chrome/V8 JS引擎中的一个错误,我们无能为力.

Answer 1

我也在考虑这个问题,这个:-webkit-backface-visibility: hidden;解决我的问题.我在SVG上使用CSS3变换时添加了这种奇怪的抖动.

更多信息可以在这里找到:CSS3转换旋转导致Chrome中的1px转移

希望能帮助到你

Answer 2

我改变了你的 css: ul.nav li a，添加float: right到它并修复了抖动。

不管怎样，如果有帮助的话，当我用 height:auto 对另一个 div 中的一个 div 的高度进行动画处理时，我遇到了同样的问题。将高度更改为固定宽度解决了这个问题。

希望能帮助到你。