javascript - 如何使用 jquery 每个函数为元素添加宽度？

Question

我想在彼此内部使用两个单独的 div 来构建加载条效果。我把它全部定位了，但是我怎样才能让它们中的一个通过过渡将其宽度从 %1 增加到 %100？我希望它在 10 秒内完成。

谢谢。

 <div class="loading-container">

            <div class="outside-loading"></div>
            <div class="inside-loading"></div>
 </div>

标签： javascripthtmljquerycssprogress-bar

Answer 1

使用 jQuery animate()相当简单，您可以自定义步进或缓动，还可以根据需要使用回调来启动或完成

$('.outside-loading').animate({width: '100%'}, 3000);// using 3 sec for demo

.outside-loading {
  background: blue;
  width: 0;
  height: .5em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading-container">
  <div class="outside-loading"></div>
  <div class="inside-loading"></div>
</div>