javascript – 使用jQuery动画宽度时奇怪的“抖动”效果(仅限Chrome！)

我在一段简单的代码片段中使用jQuery来动画化li元素的宽度.我使用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/(编辑：错误现已修复)

我之前使用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引擎中的一个错误,我们无能为力.

解决方法

我改变了你的css：ul.nav li a,添加浮动：正确到它并修复震动.

无论如何,如果它有帮助,我在另一个div中的div的高度动画高度为auto时遇到了同样的问题：auto.将高度更改为固定宽度解决了这个问题.

希望能帮助到你.

原文地址：https://www.jb51.cc/jquery/151140.html