当动态变化宽度闪烁时

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

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

你闪烁的意思是什么？它重新启动？ – 2014-09-02 19:14:06

我看到两件事情可能是你所描述的闪烁。首先，将最大宽度设置为70，如果宽度超过100％，宽度将在70px处“暂停”。如果是因为宽度从100％跳到0，那么您需要调整代码来反转计数器，而不是模数。 – mowwwalker 2014-09-02 19:18:50

也就是说它是如何去看看，如果你尝试一次递增1％。而是使用jquery动画，以获得更好的过渡

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

2014-09-02 19:20:58

如果你想达到一个70像素宽当它到达100％，你需要添加一个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; 
}

2014-09-02 19:23:42

回答