jquery - 1-2 像素抖动动画水平手风琴

Question

我正在为需要一些简单动画的网站构建自定义标题。标题以 3 个相同大小的 div 开始，当其中一个 div 被激活（单击）时，剩余的 div 会缩小，而激活的 div 会扩展以填充水平空间。

标题工作正常，但是当 div 扩展/缩小时，标题的整体水平尺寸往往会发生 1-2 像素的变化，这会使标题看起来抖动。如果您在与它交互时将注意力集中在标题的右侧，则可以看到它。

我已将代码简化为最基本的形式，并将其添加到 jsbin 中。

有什么方法可以消除抖动，或者有更好的实现方法可以避免它吗？

score 1 · Accepted Answer

你的数学是关闭的。将最大宽度更改为816而不是818.

您的 CSS 声明每个块都是296, 所以296*3 = 888. 你的 Javascript 告诉大块是818，小块是36。 818+36*2 = 890.

因此，您将框的总大小增加了 2 个像素，这第一次导致了锯齿状动画。

1 回答 1