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

197

01 октября 2018, 00:40

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

Answer 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; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<br/> 
<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" value="Click"> 
</div>