Держать что-то в центре контейнера, поскольку контейнер оживляет ширину + высоту, дрожание анимации, неправильная математика?

Question

Я использую jquery, чтобы стрелка была в центре контейнера (кружка).При наведении курсора на круг, круг увеличивает его собственную ширину, высоту и ширину границы.Я думаю, что моя проблема в математике, сначала я думал, что делаю это правильно, но стрелка в круге дрожит при анимации, заставляя меня поверить, что моя математика неверна.Я пытаюсь заставить стрелку перестать дрожать при анимации.

Эта первая скрипка - моя первая попытка просто анимировать ширину границы и заставить ее оставаться в том же положении:

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

Эта вторая скрипка - то, где я сейчас нахожусь, застрял, с неправильной математикой, я считаю:

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

РЕДАКТИРОВАТЬ: я пыталсяповторное выравнивание стрелки, но анимация все еще дрожит?

Answer 1

Я действительно не потратил время, чтобы проверить вашу математику, хотя, предполагая, что это правильно, вы, вероятно, сталкиваетесь с проблемами, которые браузеры не точны.Это означает, что они не выполняют субпиксельный рендеринг.Если ваши значения являются дробными, а не целыми, они усекают их, и это может заставить его выглядеть как дрожание / колебание элемента, поскольку вычисление проходит анимацию.

С однонаправленными вещами - только расширение илидвигаясь в одном направлении, вы склонны замечать это меньше, потому что он должен двигаться и выглядит достаточно гладким для глаз.Но с вашей стрелкой, которая должна оставаться неподвижной, даже заметный прыжок влево, а затем пиксель вправо и обратно очень заметен.

Рендеринг субпикселя Google, и вы увидите, что онутомительная проблема.

По большей части вы ничего не можете с этим поделать.Возможно, стрелка расположена над остальной частью круга и не является частью анимации.

О, и еще одна точка, вам не хватает вызова на .stop() на стрелке: см. http://jsfiddle.net/Q3pPF/12/ Разница в том, что если вы быстро наведите указатель мыши на круг (т. Е. На вход и на выход), то в вашей версии стрелка будет много двигаться, а в моей - нет.