Jquery 当容器设置宽度+的动画时，将某个对象保持在容器的中心；高度，动画抖动，错误的数学？

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

第一把小提琴是我第一次尝试设置边框宽度的动画，使其看起来保持在相同的位置：

这第二把小提琴是我目前所处的位置，我认为它的数学是错误的：

---

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

我没有真正花时间检查您的计算结果，尽管假设它是正确的，您可能会遇到浏览器不准确的问题。也就是说，它们不进行亚像素渲染。如果您的值是分数，而不是整数，它们将截断它们，这会使计算在动画中进行时看起来像是元素在抖动/摆动

对于单向的东西——只向一个方向扩展或移动，你往往注意不到它，因为它应该移动，并且看起来足够光滑。但是，如果你的箭头应该保持静止，那么即使是向左跳一个像素，然后向右跳一个像素，然后再向后跳一个像素，也是非常明显的

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

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

---

哦，还有一点，你错过了对箭头上的

.stop（）

的调用：区别在于，如果你在圆圈上快速移动鼠标（即，向内和向外），在你的版本中，箭头移动很多，而在我的版本中，箭头移动不多。

我不知道这是否有任何帮助，但似乎只有在快速移动鼠标时，问题才会出现。将所有200个值更改为0可以消除问题（但也会消除效果）。因此数学是正确的，但我需要动画。我不明白为什么它会像现在这样抖动，而它本不应该如此。实际上，在您的JSFIDLE中，结果比OP的要好得多。即使有一点抖动，也很难注意到。