Как сделать последовательную анимацию, чтобы после пятого блока опять повторялся первый блок. Каждый блок это отдельный div
c классом .working-item
. Наверное надо последовательно добавлять блоку класс Active и потом его же удалять.
(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>
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
В ходе работы встала задача выделить соседствующие пиксели по цвету, однако я никак не додумаюсь, как это сделатьЕсли как в одной строке вполне...