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

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

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

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

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

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

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

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

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

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

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

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

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

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

в крайних точках когда x == 0 или x == 300 n равное 5 сделать n = -5 или наоборот n равное минус 5 сделать 5
мне сложно осилить вашу логику, но попробуйте исключить setInterval из ваших кодов навсегда, так будет лучше.

рони,
Спасибо большое! А эту задачу можно решить без setInterval? Ни в коем случае не хочу просить Вас написать код, но хотя бы просто намекните, как решить такую задачу без setInterval.
PS. Ребят, извините за такие нубские вопросы, я в самом начале изучения и вот попалась такая задачка, целый день не мог решить))

И до сих пор у меня остается вопрос, что значит !x

Блин, не увидел по !x. Все, спасибо, теперь понял!

window.setTimeout или window.requestAnimationFrame или $().animate

Спасибо большое!

рони,
Вот напомнили Вы про animate, сразу получилось сделать вот так
https://jsfiddle.net/gooodwin67/kyuLc6oy/
Но все равно, чтобы зациклить пришлось использовать setInterval

очередной бред, безумно расходующй ресурсы браузера и компа, как и ваш пост тут №6.
нет причин чтоб где-то использовать setInterval
https://jsfiddle.net/kyuLc6oy/3/

gooodwin67,
Проще для восприятия - https://jsfiddle.net/kyuLc6oy/4/
Используем коллбэк у функции animate для вызова самовызывающиеся функции foo, тем самым создаем рекурсию.
Теперь тебе осталось написать реализацию с setTimeout

Здесь на самом деле не имеет смысла, что использовать — ведь left не является аппаратно-ускоренным свойством, поэтому не получается ровно 60fps. Также не может принимает дробные значения, из-за чего медленная анимация получается прерывистой.
И вряд ли получится дёргать DOM с частотой 60 раз в секунду, чтобы это было всегда одинаково.

Аппаратно-ускоренным свойства — transform, filter, opacity, mask
Если анимируете не эти свойства, то рискуете получить не идеальную анимацию с 60fps.
В таком случае лучше использовать canvas или video, которые тоже имеют аппаратное ускорение.