Przesuwanie div'a pętlą for, domknięcia

0

Jak pewnie zauważyliście z poprzedniego wpisu:
Program nie działa przez <!Doctype html>
Uczę się "ruszania" obiektami na stronie.
Wpadłem na pomysł żeby robić to za pomocą pętli for:

var licznik = 0, div;
function ruszaj() {
    div = document.getElementsByTagName("div")[0];
    licznik++;
    div.style.left=licznik + 'px';
}
function przesoon(){
for(var x = 0; x<200; x++) {
   setTimeOut(ruszaj, 50)
	}
}

Oczywiście wiem że to co napisałem nie będzie płynnie przesuwało diva o 200px.
Wiedziałem już wcześniej że do takich "zadań" używa się domknięć.
Z racji że nie udało mi się jeszcze pojąć tej wspaniałej idei, postanowiłem bezmyślnie podstawić pod wzór z tej strony:
http://blog.nebula.us/13-javascript-closures-czyli-zrozumiec-i-wykorzystac-domkniecia

for (var i = 0; i < 5; i++) {
    (function (e) {
        setTimeout(function () {
            console.log(e);
        }, 500);
    })(i);
}

Nie zadziałało.
Co więcej: oryginalny kod wywołany w konsoli nie działa tak jak opisał to autor.
Moje pytanie: Jak mam przerobić tą funkcję żeby płynnie przesuwała diva o x pikseli i nie używała globali?

0

Biorąc pod uwagę błedy takie jak brak doctype z ostatniego posta, prośba abyś wrzucił to do jsfiddle jak to aktualnie masz zrobione abyśmy widzieli dokładnie ten sam problem.

0

nie działa, bo odwołujesz się do nieistniejącego elementu. Kliknij to lepiej:
screenshot-20170830222518.png
jak widzisz jest tu onLoad, więc się powinno załadować
no i tak działa (tu się pomyliłem w linku przed chwilą), o tutaj działa: https://jsfiddle.net/6o32a3yj/2/

setTimeOut

setTimeout, literówka w nazwie. Nazwy w JS są czułe na wielkość liter.

0

Macie tu nową wersję w jsfiddle: https://jsfiddle.net/adams0/xhho1qkg/1/
Problem jest następujący: Jak przerobić ten program żeby płynnie przesuwał kwadrat w prawo?

0

https://daneden.github.io/animate.css/

0

jak wyżej lub nawet velocityjs możesz użyć i nie całego tylko fragmenty do jednej animacji tylko ;)

0

Minie jeszcze jakiś czas zanim zacznę cisnąć z jQuery, ale dzięki za poszerzenie moich horyzontów, gdy nadejdzie czas będę pamiętał o tej wtyczce :-)

1 

for(var x = 0; x<200; x++) {
   setTimeout(ruszaj, 50)
    }
}

wywołania setTimeout (a nie setTimeOut!) są niezależne od siebie, więc wywołując je po kolei wcale kolejny setTimeout nie będzie czekać, więc nie ma tego opóźnienia. To co chcesz osiągnąć możesz zrobić przez ręczne odpalanie kolejnych setTimeoutów
https://jsfiddle.net/xhho1qkg/3/
albo przez uzycie setInterval:
https://jsfiddle.net/xhho1qkg/2/

zauważ, że będziesz musiał dodać dodatkowy kod, żeby zatrzymać tę maszynę na odpowiednim x

0

A jak zrobić żeby przemieszczał się a potem wracał? :
https://jsfiddle.net/adams0/uf7arwwb/

0

zamiast deklarowania zmiennej w pętli za pomocą var użyj let. Powinno działać. Let powoduje utworzenie za każdym razem nowej zmiennej i nie "wyrzuca" zmiennej do zakresu nadrzędnego jak to jest w przypadku var

2

A tak abstrahując zupełnie od tematyki js, moim zdaniem animacje interfejsu powinno wykonywać się w CSS za pomocą @keyframes lub jeśli to jakiś mało skomplikowany twór, transition.

Szybciej, natywnie i lekko.

1 użytkowników online, w tym zalogowanych: 0, gości: 1