将容器置于容器中心作为容器动画宽度+高度,动画抖动,错误的数学?

时间:2011-07-31 22:07:18

标签: jquery math animation centering

我正在使用jquery将箭头置于其容器(圆圈)的中心位置。将鼠标悬停在圆形容器上时,圆圈会增加其自身的宽度,高度和边框宽度。我认为我的问题是数学,我认为我一开始就做得很好,但是当动画制作时,圆圈中的箭头会抖动,这让我相信我的数学是错误的。我正试图让箭头在制作动画时停止抖动。

第一个小提琴是我第一次尝试动画边框宽度并让它看起来保持在同一位置:

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

这个第二个小提琴是我现在所处的位置,卡住了,我相信错误的数学:

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

编辑:我尝试重新对齐箭头,但动画仍然抖动?

1 个答案:

答案 0 :(得分:0)

我还没有真正花时间检查你的数学,虽然假设它是正确的,你可能会遇到浏览器不准确的问题。意思是,他们不做子像素渲染。如果你的值是小数而不是整数,它们将截断它们,这可能使它看起来像一个元素抖动/摇摆,因为计算通过动画。

对于单向的东西 - 只在一个方向上展开或移动,你往往会注意到它减少,因为它应该移动并且看起来足够平滑。但是如果你的箭头应该保持静止,那么即使是左边的像素跳跃,然后是右边和后面的像素跳跃也是非常明显的。

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

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

哦,还有一点,你错过了箭头上.stop()的来电:见http://jsfiddle.net/Q3pPF/12/不同之处在于你是否将鼠标快速移动(即进出)版本箭头移动了很多,在我看来没有。