Javascript 动态更改宽度时闪烁

我希望动态更改元素的宽度。我有工作代码，但有时会闪烁。知道吗，为什么

JS:

CSS:

---

如果你试图一次增加1%，情况就是这样。而是使用jqueryanimate来获得更好的转换

演示：

---

如果希望在达到100%时达到70px的宽度，则需要向.xxx添加一个div父级

像这样：

<div class="yyy">
    <div class="xxx"></div>
</div>

<p id="text"></p>

---

你说闪烁是什么意思？它又重新启动了吗？我看到两件事可能就是你所说的闪烁。首先，将最大宽度设置为70，因此如果100%宽度大于70%，则宽度将在70px处“暂停”。如果是因为宽度从100%跳到0，那么您需要调整代码以反转计数器，而不是进行模运算。

 .xxx {
     max-width: 70px; 
     height: 3px;
     width: 0%; 
     background-color: orange; 
 }

var counter =0;
    setInterval(function() {
      counter = (counter + 1) % 100;
      $(".xxx").animate({width:counter+'px'});
   }, 40);

<div class="yyy">
    <div class="xxx"></div>
</div>

<p id="text"></p>

.xxx{
    height: 3px;
    width: 0%; 
    background-color: orange; 
}

.yyy{
    width: 70px;
}