Нужно, чтобы по клику на кнопку запускалась функция, которая увеличивает каждый блок(первый через 500мс, второй через секунду и т.д.), после увеличения всех блоков, все они одновременно должны уменьшиться до начальных размеров. Так же, все это должно повторяться несколько раз, 10, к примеру. Проблема состоит в том, что по запуску цикла, он проходит не все содержимое по одному разу, после чего должен делать это по новой, а начинает выполнять каждую строку по 10 раз, после чего переходит на следующую, выполняет ее 10 раз и так далее. В результате цикл,по сути, работает всего один раз.
Не знаю что еще можно попробовать, это нужно для реализации анимирования иконок: Бесконечная анимация иконок с помощью JQuery, пока так и не разобрался и реализовал через css animation, но возможности этой технологии не позволяют реализовать нужное в полной мере.
HTML:
$('.buttons').click(function transform() {
debugger
for (var i = 0; i < 10; i++) {
setTimeout(function() {
$('div.element1').css('padding', '80px');
}, 500);
setTimeout(function() {
$('div.element2').css('padding', '80px');
}, 1000);
setTimeout(function() {
$('div.element3').css('padding', '80px');
}, 1500);
setTimeout(function() {
$('div.element4').css('padding', '80px');
}, 2000);
setTimeout(function() {
$('div.element5').css('padding', '80px');
}, 2500);
setTimeout(function() {
$('div.element6').css('padding', '80px');
}, 3000);
setTimeout(function() {
$('div.element7').css('padding', '80px');
}, 3500);
setTimeout(function() {
$('div.element1').css('padding', '70px');
$('div.element2').css('padding', '70px');
$('div.element3').css('padding', '70px');
$('div.element4').css('padding', '70px');
$('div.element5').css('padding', '70px');
$('div.element6').css('padding', '70px');
$('div.element7').css('padding', '70px');
}, 4000);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="schema">
<div class="element1">1</div>
<div class="element2">2</div>
<div class="element3">3</div>
<div class="element4">4</div>
<div class="element5">5</div>
<div class="element6">6</div>
<div class="element7">7</div>
<input type="button" class="buttons">
</div>