Keeping something centered in a container as container animates width+height, animation jitters, wrong math?

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, heig开发者_C百科ht, 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?

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.