7

我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/（编辑：错误现已修复）

我之前用 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 引擎中的一个错误，我们对此无能为力。

4

5 回答 5

5

我也在寻找这个问题，并且这个：-webkit-backface-visibility: hidden;解决我的问题。我在 SVG 上使用 CSS3 变换时添加了这种奇怪的抖动。

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

希望能帮助到你

于 2014-04-29T08:45:55.897 回答
4

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

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

希望能帮助到你。

于 2012-10-15T08:37:45.630 回答
2

这似乎是 Chrome 版本 21.0.1180.60 中的一个错误，也可能存在于其他版本中。此处的代码没有任何问题，我想我们只是将其留给解决方法或现在提交错误报告。

叹。

于 2012-08-01T15:11:00.447 回答
1

当将 CSS 转换应用于父标签时，抖动 SVG 也有类似的问题。我试图随机应用我能做的一切，这个修复终于帮助了：

svg {
  transform: translate3d(0, 0, 0);
}
于 2017-07-05T17:03:34.263 回答
0

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

我注意到该元素也具有vertical-align:middlecss 属性。改变它以vertical-align:text-bottom解决问题。Chrome v23中不再有抖动效果（可能是新版本中仍然存在该错误）。

于 2012-12-23T03:52:45.697 回答