Chrome，jquery 动画摆动

Posted 2023-05-08

【中文标题】Chrome，jquery 动画摆动

【英文标题】：Chrome, jquery animate wobble

【发布时间】：2012-09-16 22:57:09

【问题描述】：

我遇到了一个仅影响 Chrome 的问题。此外，它仅在屏幕处于特定宽度时可见。

我创建了一个可以复制问题的小提琴。

http://jsfiddle.net/T8LvA/63/

当您翻转红色框时，父级的宽度会被动画化以显示更多的红色框。

您可能需要多次调整 html 窗格的宽度才能看到摆动，

关于如何最好地解决此问题的任何想法？

谢谢

【问题讨论】：

摆动已确认。当预览平移宽度大于 1020 时，我可以使用提供的 jsfiddle 在 Chrome 中看到它。

【参考方案1】：

使用float:right 而不是绝对定位。

http://jsfiddle.net/T8LvA/70/

发生这种情况是因为当您更改宽度时，它会向右延伸 - 然后它会回流并移回左侧到正确的位置，这会导致摆动。将它浮动到右边总是保持它在那里。

澄清一下：您需要在 #widget 和 .hidden 上替换 position: absolute width float: right 以获得正确的结果。

【参考方案2】：

如果你使用postion，你需要使用left和top，在这种情况下它是没有用的。 以这种方式尝试 fx 你的 css

#wrapper
    width: 100%;  // was 600px
    height: 100px;
    margin: 0 auto;
    //position: relative;