Как сделать бесконечный animate?

Question

[Siretsky]

Подскажите, пожалуйста, как сделать так, чтобы анимация снова повторялась?

$(document).ready(function () {
	function runIt() {
		$("#mask").css({width:0});
		$("#mask").animate({width:374},{duration:1600});
		$("#mask").animate({width:0},{duration:0});
	}
	runIt();
});

Уже пробовал много разных вариантов, перечитал кучу форумов, но ответа не нашёл. Понял, что нужно как то вывести функцию в самой функции, но как это сделать не понял. Спасибо!

Answer 1

[neolink]

javascript выполняется в том же потоке в котором производится отрисовка страницы, если вы сделаете цикл - вкладка просто зависнет
используйте анимации из css https://developer.mozilla.org/en-US/docs/Web/Guide...

но если хотите на jquery то используйте возможность вызвать обработчик после завершения анимации:
jsfiddle.net/peoa690L

Comments

[Петруша Укропов]

$(document).ready(); намекает на то, что скрипт выполнится после того как страница будет отрисована...

[neolink]

Петруша Укропов: document ready намекает на запуск кода после подгрузки всех ресурсов не более того.
animate асинхронно выполняе шаги анимации через setTimeout или requestAnimatetionFrame и это спасает в данном случае, но подход все равно не самый лучший

[Siretsky]

neolink: Спасибо за информацию, попробую на css сделать.

Answer 2

[Siretsky]

т.е на jQuery это сделать нельзя?

Comments

[neolink]

можно, например так:
jsfiddle.net/lonesomeday/4jqfG

но пожалейте ваших пользователей (особенно на ie)

Answer 3

[unclepotap]

$(document).ready(function () {
  setInterval(function(){
    $("#mask").css({width:0});
    $("#mask").animate({width:374},{duration:1600});
    $("#mask").animate({width:0},{duration:0}); 
   }, 1600);
});

Comments

[Siretsky]

Большое вам спасибо! Не знал о таком.

[neolink]

ну только анимации будут накладываться друг на друга

[Siretsky]

Да, я заметил, что 1600 внизу изменить нельзя. Такой вариант тоже подходит, еще раз спасибо!

[unclepotap]

Как бы задержка 1600 мс между анимациями, так что если и будут накладываться, то не значительно (на время исполнения других кусоков кода) . Вариант с css для подобных вещей разумеется предпочтительнее.

[neolink]

unclepotap: jsfiddle.net/8swg1fxy/, бывает заметно помаргивает, все таки через done это будет лучше смотреться