Зациклить последовательную анимацию блоков

83
25 января 2022, 06:10

Как сделать последовательную анимацию, чтобы после пятого блока опять повторялся первый блок. Каждый блок это отдельный div c классом .working-item. Наверное надо последовательно добавлять блоку класс Active и потом его же удалять.

Answer 1

(function(elements) { 
  var i = -1; 
  var className = 'working-item__active'; 
  if (!elements.length) { 
    return false; 
  } 
  function step() { 
    elements.eq(i).removeClass(className); 
    if (++i >= elements.length) { 
      i = 0; 
    }; 
    elements.eq(i).addClass(className); 
    setTimeout(step, 1200); 
  } 
  step(); 
}($('#general_process').children()));
body, 
html { 
  margin: 0; 
  padding: 0; 
} 
 
#general_process { 
  display: block; 
  position: relative; 
  margin: 10px; 
} 
 
.working-item { 
  display: inline-block; 
  position: relative; 
  margin: 10px; 
  width: 100px; 
  text-align: center; 
  vertical-align: top; 
} 
 
.number { 
  display: block; 
  position: relative; 
  width: 20px; 
  height: 20px; 
  line-height: 20px; 
  padding: 10px; 
  margin: 0 auto; 
  text-align: center; 
  border: 1px solid black; 
  -webkit-transition: all 0.1s ease; 
  -moz-transition: all 0.1s ease; 
  transition: all 0.1s ease; 
} 
 
.number:before { 
  content: ""; 
  display: block; 
  position: absolute; 
  top: 2px; 
  left: 2px; 
  right: 2px; 
  bottom: 2px; 
  border: 1px solid black; 
} 
 
.working-item__active .number { 
  -webkit-transform: scale(1.25); 
  -ms-transform: scale(1.25); 
  transform: scale(1.25); 
} 
 
.working-item__active p { 
  color: burlywood; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="general_process"> 
  <div class="working-item"> 
    <div class="number">1</div> 
    <p>Вы оставляете заявку</p> 
  </div> 
  <div class="working-item"> 
    <div class="number">2</div> 
    <p>Мы выезжаем</p> 
  </div> 
  <div class="working-item"> 
    <div class="number">3</div> 
    <p>Составляем смету</p> 
  </div> 
  <div class="working-item"> 
    <div class="number">4</div> 
    <p>Выполняем работу</p> 
  </div> 
  <div class="working-item"> 
    <div class="number">5</div> 
    <p>Вы принимаете работу и оплачиваете</p> 
  </div> 
</div>

READ ALSO
C++, член-тип шаблона

C++, член-тип шаблона

Рассмотрим следующий код:

87
Как выделить область изображения по цвету?

Как выделить область изображения по цвету?

В ходе работы встала задача выделить соседствующие пиксели по цвету, однако я никак не додумаюсь, как это сделатьЕсли как в одной строке вполне...

120
Upper_bound для pair

Upper_bound для pair

Язык: С++

128