Не корректно работает цикл

#javascript #html #jquery #css

Нужно, чтобы по клику на кнопку запускалась функция, которая увеличивает каждый блок(первый
через 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);
  }
})


  
1
  
2
  
3
  
4
  
5
  
6
  
7
  




    

Ответы

Ответ 1

$('.buttons').click(function() {
  for (let i = 0; i < 10; i++) {
    for (let j = 1; j <= 7; j++) {
      setTimeout(function() {
        $('div.element' + j).css('padding', '20px');
      }, 500 * j + (4000 * i));
    }
    setTimeout(function() {
      $('div.schema div').css('padding', '10px');
    }, 4000 * (i + 1));
  }
});
div.schema div {
  border: 1px solid black;
  background: lightgreen;
  display: inline;
  padding: 10px;
}




  
1
  
2
  
3
  
4
  
5
  
6
  
7