Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [Javascript] Przesuwanie elementu - setTimeout
calvx
post 16.01.2012, 12:53:14
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 16.01.2012

Ostrzeżenie: (0%)
-----


Witam,

uczę się Javascriptu i od kilku godzin próbuję zrobić sobie prostą animację w stylu przesuwania elementów. Załóżmy że mam element o id="test". W skrypcie mam coś takiego:
  1. var ax, mx, object, position, positiontext;
  2. mx= screen.width-50;
  3.  
  4. function move(position) {
  5. positiontext=position+"px";
  6. document.getElementById("test").style.left=positiontext;
  7. }
  8.  
  9. function show() {
  10. for(ax=1;ax<=mx;ax+=10) {
  11. setTimeout("move(ax)",100);
  12. }
  13. }

Zadaniem skryptu jest przesunięcie elementu z jednego krańca ekranu do drugiego. Funkcja działa, ale nie tak jak bym tego oczekiwał. Chciałbym aby element blokowy przesuwał się powoli od lewej strony do prawej. Do tego użyłem funkcji setTimeout. Niestety pod operą i IE po wciśnięciu buttona który odpowiada za uruchomienie funkcji przesunięcia, po upłycięciu 100ms element przesuwany jest od razu do prawej strony.
Gdzie popełniłem błąd? Ewentualnie w jaki inny sposób przesuwać elementy w czasie?
Go to the top of the page
+Quote Post
nospor
post 16.01.2012, 12:55:24
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




Odpalsz w petli x dziesiat razy setTimeout to nic dziwnego ze ci sie xdziesiat razy odpali po minieciu zadane czasu.


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
calvx
post 16.01.2012, 13:04:56
Post #3





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 16.01.2012

Ostrzeżenie: (0%)
-----


Nie rozumiem. W pętli raz po razie przesuwam element o 10px, a następnie odczekuję 100ms?
Chyba, że się mylę.

Z tego wychodzi, że setTimeout nie zatrzymuje pętli na 100ms tylko buforuje punkty, które bardzo szybko się zapełniają do screen.width.
W takim razie w jaki sposób odczekać zadaną liczbę milisekund?
Go to the top of the page
+Quote Post
nospor
post 16.01.2012, 13:13:22
Post #4





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




Cytat
Z tego wychodzi, że setTimeout nie zatrzymuje pętli na 100ms
Tak,setTimeout nic nie zatrzymuje. Wystarczy zajrzec do dokumentacji js i zobaczyc co robi setTimeout.

Tak, masz używać setTimeout do wykonania funkcji move(). Ale masz to zrobić raz na początku skryptu a potem wewnatrz funkcji move() a nie w petli.


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 16.06.2025 - 19:51