Движение div из стороны в сторону

[gooodwin67]

Привет. Есть вот такой код. Квадрат двигается в право, пока не достигнет 300px, как делать, чтобы он после этого начал движение обратно до нуля и потом опять до 300 и т д. до бесконечности))
https://jsfiddle.net/gooodwin67/emogt9tj/

[gooodwin67]

Или может я вообще не правильно начал, как сделать проще зацикленное движение объекта?

[Rasy]

gooodwin67,
Ну это просто, тут даже яваскрипт не нужен. цсс анимэйшн + кейфреймы.

[рони]

gooodwin67,
https://jsfiddle.net/emogt9tj/1/

[gooodwin67]

рони,
Ого, спасибо. Если не сложно объясни пожалуйста логику вот этого
if ( !x || x == 300) {
n = -n;
}
x = x + n;

На словах, "если то то, то это"

[gooodwin67]

И если не сложно, подскажите, где я не так думаю. Если вот такой код:
for (x = 0; x < 300; x++) {
function anim() {
a.offset({left : x});
}
setInterval(anim,1000);
}

Как мне кажется по логике: первая итерация x = 1 - через секунду выполняется функция, объект перемещается на 1. Потом вторая итерация x = 2, через сек выполняется функция, объект перемещается на 2.
А он у меня сразу через секунду на 300 перемещается. Где я тут ошибаюсь?

[Rasy]

gooodwin67,
Рони не любит объяснять. Могу заметить, что реализация элегантная и чисто математическая.
n - это шаг в 5 пикселей. x - инкремент и декремент.
Если x равен нулю, то изменяем число n на положительное и при каждом вызове функции инкрементируем глобальную переменную x. Т.е. 5,10,15,20...300
Если x равен 300, то изменяем число n на отрицательное и при каждом вызове фунции декрементируем глобальную переменную x. Т.е 300,295,290...0

[gooodwin67]

if ( !x || x == 300) {

Вроде разобрался, кроме одного !х что значит. ! это вроде отрицание. Но никак не вдупляю, что именно тут это означает

[Rasy]

Реализация на css. В продакшене рекомендую использовать анимацию на css. В крайних случаях на js
https://jsfiddle.net/emogt9tj/2/

Вроде разобрался, кроме одного !х что значит

Проверка на псевдоложь. Логическое отрицание, если x равно нулю в нашем случаше.

[gooodwin67]

Rasy,
Да, спасибо, я разобрался, что тут как бы от обратного идет. Но вот что значит !x )))