Как по клику на кнопку начать анимацию элементов по очереди, и чтобы она повторялась бесконечно?
Анимация должна быть следующая:
первый элемент (красный квадрат) передвинулся полностью,
когда первый элемент передвинулся полностью, через короткую паузу второй элемент (зеленый) передвинулся,
длинная пауза,
после длинной паузы второй элемент вернулся на место,
когда второй элемент вернулся на место, через короткую паузу первый элемент вернулся на место
длинная пауза, и т.д. всё повторяется
$("button").click(function {
function sam() {
$(".box_one").animate({
left: '200px'
}, 3000, 'linear', sam);
$(".box_two").animate({
left: '400px'
}, 3000, 'linear', sam);
}
sam();
});
.box_one {
position: absolute;
top: 40px;
width: 50px;
height: 50px;
background-color: red;
left: 0;
}
.box_two {
position: absolute;
top: 100px;
width: 50px;
height: 50px;
background-color: green;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="active">Включить анимацию</button>
<div class="box_one"></div>
<div class="box_two"></div>