增加元素的宽度并增加计数效果

Question

我正在寻找一种使用jQuery制作简单动画的方法。例如，当我有一个60％的百分比需要设置为div时，我想通过jQuery将其添加到具有递增功能的函数中，以逐步显示元素的动画，直到设置为60％。这是我的代码：

.wrapper {
  display: blog;
  width: 100%;
  display: flex;
  height: 100px;
  background: orange;
}

.inner {
  display: blog;
  background: red;
}

<div class="wrapper">
  <div class="inner" style="width: 60%;">
  
  </div>
</div>

Answer 1

我改变了一些点点滴滴。并没有使用jQuery（对不起）。

const percentage = 60;
var currPer = 5;
var pBar = document.getElementById("inner");

document.addEventListener('DOMContentLoaded', function() {

  let progressInterval = setInterval(function() {
    if (currPer < percentage) {
      currPer += 5;
      pBar.style.width = `${currPer}%`;
      console.log(currPer);
    } else {
      cancelInterval(progressInterval);
    }
  }, 500);

});

.wrapper {
  display: blog;
  width: 100%;
  display: flex;
  height: 100px;
  background: orange;
}

#inner {
  display: blog;
  background: red;
  width: 2%;
}

<div class="wrapper">
  <div id="inner">

  </div>
</div>

Answer 2

您可以对setTimeout使用递归函数：

   
$(document).ready(function(){
  function update_progress(_val){
    if (_val <= 60){
      $('.inner').css('width', _val.toString()+'%');
      setTimeout(function(){
         update_progress(_val+1);
      }, 100);
    }
  }
  update_progress(0);
});

.wrapper {
  display: blog;
  width: 100%;
  display: flex;
  height: 100px;
  background: orange;
}

.inner {
  display: blog;
  background: red;
  width: 2%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
 <div class="inner">

 </div>
</div>