Question

我在一段简单的代码片段中使用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 for me）中重现效果。在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 transform rotate causing 1px shift in Chrome

希望有所帮助

Answer 2

我更改了你的css：ul.nav li a，为其添加了float: right并修复了这个问题。

无论如何，如果它有帮助，我在另一个div中使用height：auto设置div的高度时会遇到同样的问题。将高度更改为固定宽度解决了它。

希望它有所帮助。

Answer 3

这似乎是Chrome版本21.0.1180.60中的错误，也可能出现在其他版本中。这里的代码没有错，我想我们现在只需要解决方法或提交错误报告。

叹息。

Answer 4

当有一个CSS转换应用于父标记时，与摇动SVG有类似的问题。我试图随意应用所有内容，这个修复最终有所帮助：

void switchToShader(ShaderProgram* newProg, Mesh& mesh) {
    newProg->bind();
    mesh.vao()->bind();
    m_currentProg = newProg;
}

Answer 5

当我尝试为其中的另一个div设置动画时，某些div会出现此问题。我注意到，如果div或元素具有css属性display:inline-block，则会发生这种情况。使元素浮动可以解决问题，但在我的情况下需要inline-block。

我注意到该元素还有vertical-align:middle css属性。将其更改为vertical-align:text-bottom解决了问题。 Chrome v23中没有更多震动效果（可能是新版本中的错误仍然存在）。

使用jQuery动画宽度时出现奇怪的“抖动”效果（仅限Chrome！）

5 个答案: