動畫一個引導進度條不斷去出於某種原因

Question

我的進度條，HTML看起來像：

<div class="progress progress-striped active"> 
    <div style="width: 10%; overflow: hidden;" class="bar" id="status-progress-bar"></div> 
</div> 

當我在它上面運行$("#status-progress-bar").stop().animate({ width: '10%' }, 5000);，寬度跳到54％（穩定），然後動畫下降到10％。我不知道爲什麼這是或如何處理它。

想法？

Answer 1

我已經有一些麻煩太動畫引導進度條。
有時寬度跳躍到100％，或動畫時的隨機位置。
而且如果要將動畫設置爲linear而不是默認的swing，則會出現問題。

我所做的一切是增加style="transition:none;"到.bar這樣的：

<div id="upload-progress" class="progress progress-striped active"> 
    <div class="bar" style="transition:none;"></div> 
</div> 

現在，它似乎是工作的罰款。

Answer 2

我想你可能已經發現了一個錯誤或者一些意想不到的行爲，而且這個酒吧是動畫的。如果您從您的html中刪除width: 10%，那麼JavaScript的預期效果。 （不知道你爲什麼以10％開始）。它看起來正在做的是在現有的10％之上動畫10％，然後意識到它應該只有10％，然後縮小。

<div class="progress progress-striped active"> 
    <div style="overflow: hidden;" class="bar" id="status-progress-bar"></div> 
</div>