изменение borderWidth с javascript и включение смещения позиции

Question

Я пытаюсь изменить ширину границы div в течение определенного периода времени и смещать позицию div равной суммы. Прирост рассчитывается как: дельта ширина/времени дельта (время происходит в цикле)

var widthchange = (width2-width1)/(t2-t1) 

, который дает мне значение чего-то подобного (например)

widthchange = 2.199999999999843 

так что если Я приращение ширины:

___ .style.borderWidth =(current += widthchange)+"px "+current+"px "+current+"px "+current+"px" 

и смещение позиционирования (в данном случае)

___.style.top =(current -= widthchange)+"px "+current+"px "+current+"px "+current+"px" 

div слегка встряхивает назад и вперед, когда происходит изменение.

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

Может кто-нибудь, пожалуйста, подтвердите, что округление до ближайшего пикселя - это то, что происходит с шириной? Или дайте мне советы о том, как правильно работать?

Благодаря

Answer 1

Вы можете решить эту проблему, делая это:

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

Код будет выглядеть примерно так, я думаю, как я откупите некоторый непроверенный код ...

var totalWidth = width2-width1; // must be positive 
var count = t2-t1; // must be positive 
var widthchange = totalWidth/count; 

var iWidthChange = Math.floor(widthchange); 
var pixelsToMove = Math.floor(totalWidth/iWidthchange); 
var finalPixelsToMove = totalWidth - (pixelsToMove * count); 

for (var i=0 ; i < (t2-t1); ++i) { 
    ... move one increment of 'pixelsToMove' ... 
} 
... move one final increment of 'finalPixelsToMove'