将某些东西放在容器中作为容器动画宽度+高度，动画抖动，错误的数学？答案

【问题标题】：Keeping something centered in a container as container animates width+height, animation jitters, wrong math?将某些东西放在容器中作为容器动画宽度+高度，动画抖动，错误的数学？
【发布时间】：2011-10-17 02:01:32
【问题描述】：

我正在使用 jquery 将箭头保持在其容器（一个圆圈）的中心。悬停在圆形容器上时，圆形会增加它自己的宽度、高度和边框宽度。我认为我的问题是数学，我一开始以为我做对了，但是动画时圆圈中的箭头会抖动，让我相信我的数学是错误的。我试图让箭头在动画时停止抖动。

这第一个小提琴是我第一次尝试为边框宽度设置动画并使其看起来保持在同一位置：

http://jsfiddle.net/nicktheandroid/FVFen/

这第二个小提琴是我目前所处的位置，卡住了，我认为是错误的数学：

http://jsfiddle.net/nicktheandroid/Q3pPF/

编辑：我尝试重新对齐箭头，但动画仍然抖动？

【问题讨论】：

我不知道它是否有任何帮助，但似乎只有在快速移动鼠标时才会出现问题。将所有 200 个值更改为 0 可以消除问题（但也会消除效果）。
所以数学是正确的，但我需要动画。我不明白为什么它会像现在这样抖动，而不应该是这样。

标签： jquery math animation centering

【解决方案1】：

我并没有真正花时间检查你的数学，尽管假设它是正确的，你可能会遇到浏览器不准确的问题。意思是，他们不进行亚像素渲染。如果您的值是小数而不是整数，它们将截断它们，这会使元素看起来像在抖动/摆动，因为计算通过动画进行。

对于单向的事物 - 仅在一个方向上扩展或移动，您往往不会注意到它，因为它应该移动并且看起来足够平滑。但是，如果您的箭头应该保持静止，即使是向左跳一个像素，然后向右跳一个像素，然后再跳回来，也是非常明显的。

Google 亚像素渲染，你会发现这是一个令人厌烦的问题。

在大多数情况下，您对此无能为力。也许箭头绝对位于圆的其余部分上方，而不是动画的一部分。

哦，还有一点，您在箭头上错过了对.stop() 的调用：请参阅http://jsfiddle.net/Q3pPF/12/ 不同之处在于，如果您在您的版本中将鼠标快速移动到圆圈上（即进出），箭头会移动很多，我的没有。

【讨论】：

实际上在您的 jsfiddle 中，结果比 OP 的要好得多。即使有一点抖动，也很难察觉。