JQuery animate() dinamikusan
Sziasztok!
Próbáltam a címmel is kifejezni a problémámat, de máris mondom hogy mit szeretnék pontosan megvalósítani. Szóval Az animate(...); függvény mint tudjuk "alapértelmezetten" idő és végállapot által van vezérelve, tehát megadsz egy időtartamot meg a végállapoto(ka)t és ezek alapján animálódik az attribútum(halmaz). Viszont! Én azt szeretném valahogy megvalósítani, hogy az animáció hosssza/időtartama (majd később a sebessége is, de ezt egyelőre hagyjuk) dinamikus legyen, mégpedig attól függően hogy az animálandó tulajdonság mikor ér el egy olyan értéket ami közben dinamikusan változhat. Megpróbálom érhetőbben is. Tehát animáljuk például egy div konténer scrollTop attribútumát, magyarul görgessük a tartalmát. A görgetést szabályozza egy (a görgetés animációja alatt) dinamikusan változó x érték ami a görgetés végállapotát adja meg (tehát ha az animálandó scrollTop érték eléri ezt az x értéket akkor fejeződjön be az animáció). A példa kedvéért ez az x érték kezdetben legyen mondjuk 700. Az animációt elindítjuk, de miközben az animáció folyik, ez az x érték 700-ról, 800-ra változik.
Ezt a problémát egyszerűen meg lehet oldani például úgy, hogy kezdetben $(div).animate({scrollTop: 700}); majd minden esetben amikor az x változik $(div).stop().animate({scrollTop: x}); ahol x az új koordináta. Ezzel a megoldással az a probléma, hogy ahányszor változik az x annyiszor lesz leállítva az animáció majd újraindítva, és ha az x érték viszonylag kis idő ( pl.1 másodperc) alatt elég sokszor megváltozik, akkor ez az egész animáció eléggé "darabos" lesz, a sok .stop(), meg újraindítás miatt, nekem pedig az kéne hogy ez nem legyen észrevehető.
Remélem hogy sikerült világosan megfogalmaznom a problémát. A segítséget előre is köszönöm.
■ Próbáltam a címmel is kifejezni a problémámat, de máris mondom hogy mit szeretnék pontosan megvalósítani. Szóval Az animate(...); függvény mint tudjuk "alapértelmezetten" idő és végállapot által van vezérelve, tehát megadsz egy időtartamot meg a végállapoto(ka)t és ezek alapján animálódik az attribútum(halmaz). Viszont! Én azt szeretném valahogy megvalósítani, hogy az animáció hosssza/időtartama (majd később a sebessége is, de ezt egyelőre hagyjuk) dinamikus legyen, mégpedig attól függően hogy az animálandó tulajdonság mikor ér el egy olyan értéket ami közben dinamikusan változhat. Megpróbálom érhetőbben is. Tehát animáljuk például egy div konténer scrollTop attribútumát, magyarul görgessük a tartalmát. A görgetést szabályozza egy (a görgetés animációja alatt) dinamikusan változó x érték ami a görgetés végállapotát adja meg (tehát ha az animálandó scrollTop érték eléri ezt az x értéket akkor fejeződjön be az animáció). A példa kedvéért ez az x érték kezdetben legyen mondjuk 700. Az animációt elindítjuk, de miközben az animáció folyik, ez az x érték 700-ról, 800-ra változik.
Ezt a problémát egyszerűen meg lehet oldani például úgy, hogy kezdetben $(div).animate({scrollTop: 700}); majd minden esetben amikor az x változik $(div).stop().animate({scrollTop: x}); ahol x az új koordináta. Ezzel a megoldással az a probléma, hogy ahányszor változik az x annyiszor lesz leállítva az animáció majd újraindítva, és ha az x érték viszonylag kis idő ( pl.1 másodperc) alatt elég sokszor megváltozik, akkor ez az egész animáció eléggé "darabos" lesz, a sok .stop(), meg újraindítás miatt, nekem pedig az kéne hogy ez nem legyen észrevehető.
Remélem hogy sikerült világosan megfogalmaznom a problémát. A segítséget előre is köszönöm.
Nincs értelme
Namost, ha megadod a
scrollTopértékének, hogy 700, akkor ott fog befejeződni az animáció. Mit jelent az, hogyxváltozik? Mi azazx, és miért változik? Ha nem tetszik azanimateműködése, akkor írhatsz saját animáló függvényt, amibensetInterval,setTimeoutvagyrequestAnimationFramesegítségével animálod a DOM elem egy tulajdonságát.Egyébként elolvastad a stop függvény dokumentációját?
Igen, tisztában vagyok az
A setTimeout-al az a problémám hogy lassú, és elég csúnya megoldás sztem. De tulajdonképpen jó, csak én egy gyorsabb dologra gondoltam, mint mondjuk az általad említett requestAnimationFrame. Viszont úgy tudom, hogy ezt már nem támogatja a JQuery, plusz nem minden böngészőben működik a dolog csak a viszonylag újabbakban de ha rosszul tudom akkor javíts ki. Nekem fontos lenne hogy a régi böngészőkben (IE7+ és társai) is működjön a dolog.
Tehát a setTimeout megoldás még egyszer hangsúlyozom, hogy jó lenne, de mivel nem ismert a megállási feltétel ezért a sok rekurzió miatt elég lassú animáláshoz. Ezért egy hasonló de gyorsabb megoldás jobb lenne.
Ami miatt fontos a gyorsaság az az, hogy az animálandó tulajdonság aktuális értéke és az éppen aktuális végállapot távolságának a függvényében változzon a közelítés gyorsasága is. Minél messzebb van a végállapot annál gyorsabban közelítsen. Tehát lényegében egy easing effektus is játszana a dologban. A lényeg hogy az animáció a lehető leggyorsabb, legsimább legyen akadások nélkül.
Ha szeretnéd, hogy minden
Neked biztos nem a JQuery fog kelleni :), valamit neked kell alkotni (amúgy meg lehet csinálni rekurzió nélkül is, de szerintem eleve a problémát nem így kellene megoldani)
Szívesen fogadok egyéb
nem tudom, hogy jó-e az
van egy függvény ami csinálja az animációt. ez egy külső változóból (a lényeg, hogy nem paraméterből, lehet az egy osztály property-je is akár) veszi ki az elérni kívánt pozíciót. ha még nem ért oda, meghívja önmagát.
valamint van valami, ami ha kell átállítja a cél pozíciót, és ha épp nem megy az animáció, akkor elindítja.
Így van
Paul Irish fallback:
Ezt a megoldást kipróbálom,