Chrome，jquery 动画摆动答案

【问题标题】：Chrome, jquery animate wobbleChrome，jquery 动画摆动
【发布时间】：2012-09-16 22:57:09
【问题描述】：

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

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

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

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

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

谢谢

【问题讨论】：

【解决方案1】：

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

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

澄清一下：您需要在 #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; 
}

【讨论】：