主页 / 问题 / 861201
Accepted
Friendly 33
Asked:2020-07-28 02:19:03 +0800 CST2020-07-28 02:19:03 +0800 CST

循环不能正常工作

  • 772

有必要通过单击按钮启动增加每个块的功能（第一个在 500 毫秒后，第二个在 1 秒后，等等），在增加所有块之后，所有块都应该同时减小到它们的初始大小。此外，所有这些都应该重复几次，例如 10 次。问题是，当循环开始时，它不会遍历所有内容一次，之后必须再次执行，而是开始执行每一行 10 次，然后进入下一行，执行 10 次，依此类推上。结果，循环基本上只运行一次。我不知道还能尝试什么，这是实现图标动画所必需的：Infinite Icon Animation with JQuery，直到我想通了并通过css动画实现了它，但是这项技术的能力并不能让我完全实现我所需要的。 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>

javascript

1 个回答

  1. Best Answer

    $('.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>

    • 2

相关问题