twitter-bootstrap - 由于某种原因，动画引导进度条一直在进行

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%，或者动画时的随机位置。如果您希望动画不是默认的，
还有一个问题。 linearswing

我所做的是添加style="transition:none;"类似.bar的内容：

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

现在它似乎工作正常。

Answer 2

我认为您可能已经发现了一个错误或一些与栏动画方式有关的意外行为。如果您width: 10%从 html 中删除 javascript，则 javascript 将按预期工作。（不知道为什么你从 10% 开始）。

FWIW，它似乎正在做的是在现有的 10% 之上设置 10% 的动画，然后意识到它应该只有 10%，然后缩小。

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