[JQuery] Płynne przewijanie Opcje

[inc0]

Witam!

Mam na swojej stronie menu do wyboru obrazka z galerii (http://inc0.dreamhosters.com/galeria/). Algorytm przewijania w poziomie jest dość prymitywny, ale działa. Mam pytanie, czy ktoś ma jakiś pomysł żeby dodać efekt płynnego zwalniania diva po przesunięciu? Tak, by nie zatrzymywał się momentalnie, tylko płynnie.

Dzięki!
Michał

[wookieb]

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.

Ten post edytował wookieb 31.10.2009, 10:36:25

[inc0]

Dzięki! Po dokonaniu drobnych zmian mam już pomysł, jak to zrobić:)