Форум

anabenne · #1 (**permalink**) 21.07.2016, 14:11

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

Дано - 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);

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

рони · #2 (**permalink**) 21.07.2016, 14:16

anabenne,
может не дробить на куски а сделать рабочий макет

[HTML run height=300][/HTML]

рони · #3 (**permalink**) 21.07.2016, 14:21

Сообщение от anabenne

Появился 3й (плавно с прозрачностью от 0 до 100%, и с размера от 0 до 100%) - Замер

дальше что?

anabenne · #4 (**permalink**) 21.07.2016, 15:13

Сообщение от рони

дальше что?

дальше точки одновременно исчезли и опять повторилось действие
1й .. 2й и тд

рони · #5 (**permalink**) 21.07.2016, 15:27

anabenne,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #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;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
var item = $(".point"), indx = -1, len = item.length;
(function go()
{
  indx = ++indx % len;
  !indx && item.hide();
  item.eq(indx).delay(1000).fadeToggle(1200, go)

}())
});
  </script>
</head>

<body>

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


</body>
</html>

Маэстро · #6 (**permalink**) 25.07.2016, 12:06

Лучше использовать не setInterval, а requestAnimationFrame.
вот тут всё хорошо расписано с примерами: https://learn.javascript.ru/js-animation

Царь Леонид · #7 (**permalink**) 25.07.2016, 23:23

Это обязательно силами js делать? Тут просто css animation сам собой напрашивается

Форум

Справочник

Discord чат

Курсы javascript