Matematycznie wygląda to w ten sposób
Kod
var endX = 100; // x koncowe elementu
element.x += (endX - element.x) / 4; // operacja wykonywana co "klatke" animacji
Element porusza się w strone wartości endx z coraz mniejszą prędkością.
Przykład:
Kod
var endX = 100;
// 1 krok (pozycja poczatkowa 200)
(100 - 200) / 4 = -25;
//wiec
200 + (- 25) = 175;
// 2 krok
(100 - 175) / 4 = -18.75
// wiec
175 + (- 18.75) = 156.25
Kiedy zatrzymać animacje? Np wtedy gdy odległość między punktami jest mniejsza niż 1 px
Kod
if( Math.abs(endX - element.x) <= 1)
{
element.x = endX; // przy odpowiednio duzy odswiezaniu i odpowiednio małym dzielniku (nasza 4) kompletnie nie widac lekkiego "przeskoku"
// zakoncz animacje
}
W javascripcie oczywiscie musisz uzyć właściwości left, ale przedstawiałem tylko zasadę działania.