动态改变宽度时闪烁

Question

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

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; 
 }

Answer 1

如果您尝试一次增加1％，那就是它的样子。而是使用jquery动画来获得更好的过渡

DEMO：http://plnkr.co/edit/8OsVuRJGCLQsJWfrlzJ4

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

Answer 2

如果要达到100％时达到70px宽度，则需要将div父级添加到.xxx

像这样：

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

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

的CSS：

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

.yyy{
    width: 70px;
}