动画引导进度条由于某种原因继续运行

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％开始）。

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

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