javascript - Chrome，jquery 动画摆动

Question

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

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

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

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

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

谢谢

score 3 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

2 回答 2