javascript - 为具有计数效果的元素添加宽度

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>