當動態變化寬度閃爍時

我想動態地改變元素的寬度。我有工作代碼，但它有時閃爍。任何想法，爲什麼？當動態變化寬度閃爍時

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

回答