动态改变宽度时闪烁

Flickering when the dynamic change width

本文关键字：闪烁 改变 动态      更新时间：2023-09-26

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

JS:

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

CSS：

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

如果您尝试一次增加1%，情况就是这样。相反，使用jquery animate来获得更好的转换

演示：http://plnkr.co/edit/8OsVuRJGCLQsJWfrlzJ4

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

如果你想在宽度达到100%时达到70px，你需要在.xxx 中添加一个div父级

像这样：

<div class="yyy">
    <div class="xxx"></div>
</div>
<p id="text"></p>

css：

.xxx{
    height: 3px;
    width: 0%; 
    background-color: orange; 
}
.yyy{
    width: 70px;
}
相关文章：