[anabenne]

Привет! Помогите пжлз с задачкой.

Дано - 3 элемента, которые должны плавно появляться друг за другом с интервалом времени, замирать в конечной точке. И так бесконечно. Плюс изменяться в масштабе от мала до велика.

Например. Шкала времени.
Появился 1й (плавно с прозрачностью от 0 до 100%, и с размера от 0 до 100%) - Замер
...прошло секунда...
Появился 2й (плавно с прозрачностью от 0 до 100%, и с размера от 0 до 100%) - Замер
...прошло секунда...
Появился 3й (плавно с прозрачностью от 0 до 100%, и с размера от 0 до 100%) - Замер

Цикл повторился бесконечно раз.
Вот что я сам накодил ..

<div id="point1"></div>
<div id="point2"></div>
<div id="point3"></div>

#point1,#point2,#point3 {
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 10px;
}
#point1 {
  background-color: #222;
  top: 1px;
  left: 0px;
}
#point2 {
  background-color: #111;
  top: 1px;
  left: 40px;
}
#point3 {
  background-color: #555;
  top: 1px;
  left: 80px;
}

setTimeout(function run() {
  $('#point1').fadeToggle();
  setTimeout(run, 1000);
}, 1000);
setInterval(function run() {
  $('#point1').delay(2000);
}, 1000);

setTimeout(function run1() {
  $('#point2').fadeToggle();
  setTimeout(run1, 1500);
}, 1000);
setInterval(function run1() {
  $('#point2').delay(1500);
}, 1000);

setTimeout(function run2() {
  $('#point3').fadeToggle();
  setTimeout(run2, 2000);
}, 1000);
setInterval(function run2() {
  $('#point3').delay(1000);
}, 1000);

Не могу догнать где делать интервал и как.
Спасибо всем за помощь!