当容器对宽度和高度进行动画处理时，将某些内容保持在容器中央，动画抖动，数学错误？
我使用 jquery 使箭头保持在其容器（圆圈）的中心。将鼠标悬停在“圆形”容器上时，圆形会增加其自身的宽度、高度和边框宽度。我认为我的问题是数学，我一开始以为我做对了，但是动画时圆圈中的箭头抖动，让我相信我的数学是错误的。我试图让箭头在动画时停止抖动。
这第一个小提琴是我第一次尝试对边框宽度进行动画处理并使其看起来保持在同一位置：
http: //jsfiddle.net/nicktheandroid/FVFen/
这第二个小提琴是我目前所处的位置，卡住了，我相信数学是错误的：
http://jsfiddle.net/nicktheandroid/Q3pPF/
编辑：我尝试重新对齐箭头，但动画还是抖动？
I'm using jquery to keep an arrow centered in it's container(a circle). When hovering the Circle container, the circle increases it's own width, height, and border width. I think my problem is the math, I thought I was doing it right at first, but the arrow in the circle jitters when animating, leading me to believe my math is wrong. I'm trying to get the arrow to stop jittering when animating.
This first fiddle is my first attempt at just animating the border width and making it appear to stay in the same position:
http://jsfiddle.net/nicktheandroid/FVFen/
This second fiddle is where i'm currently at, stuck, with the wrong math I believe:
http://jsfiddle.net/nicktheandroid/Q3pPF/
EDIT: i've tried re-aligning the arrow, but the animation still jitters?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我并没有真正花时间检查你的数学，尽管假设它是正确的，但你可能会遇到浏览器不准确的问题。这意味着，他们不进行子像素渲染。如果您的值是小数而不是整数，它们将截断它们，这可能会使元素看起来像在动画中进行计算时在抖动/摆动。
对于单向的事物——仅向一个方向扩展或移动，您往往不会注意到它，因为它应该移动并且在眼睛看来足够平滑。但是，由于您的箭头应该保持静止，即使是向左像素跳跃，然后向右像素跳跃然后再返回也是非常明显的。
谷歌子像素渲染，你会发现这是一个令人厌烦的问题。
大多数情况下你对此无能为力。也许将箭头绝对定位在圆圈的其余部分之上，而不是动画的一部分。
哦，还有一点，您错过了对箭头上的
.stop()的调用：请参阅 http://jsfiddle.net/Q3pPF/12/ 区别在于，如果您在您的版本中将鼠标快速移动到圆圈上（即进出），箭头会移动很多，而在我的版本中则不会' t。I haven't really taken the time to check your maths, although assuming it's right, you're probably running into the problems that browsers aren't accurate. Meaning, they don't do sub-pixel rendering. If your values are fractional and not whole they will truncate them, and that can make it look like an element is jittering/wobbling, as the calculation goes through the animation.
With things that are unidirectional - only expanding or moving in one direction, you tend to notice it less because it is supposed to move and looks smooth enough to the eye. But with your arrow that is supposed to stay stationary, even a pixel hop to the left followed by a pixel hop to the right and back again is very noticeable.
Google sub-pixel rendering and you'll see it's a tiresome problem.
For the most part there's nothing you can do about it. Maybe have the arrow positioned absolutely above the rest of the circle and not part of the animation.
Oh and another point, you're missing a call to
.stop()on the arrow: see http://jsfiddle.net/Q3pPF/12/ The difference is if you move your mouse over the circle quickly (i.e. in and out) in your version the arrow moves a lot, in mine it doesn't.