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>

标签： javascriptjqueryhtmlcss

Answer 1

您可以使用递归函数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>