JQuery 'animate' 函数无法平滑地设置 Bootstrap 进度条宽度的动画

Question

我正在使用 jQuery/Bootstrap 设计一个动画进度条。我的进度条有 8 个“步骤”，每个步骤代表整个进度条宽度的 12.5%。

我设计了一个函数，当动画栏从步骤一到步骤四变化时，该函数可以很好地工作。然而，当第五步出现时，由于某种原因，条形动画会先变为 100%，然后再降至 50%。同样的事情发生在步骤 6、7 和 8。

我在这里做错了什么吗？为什么我的 animate() 函数在第 5 步将条形宽度跳至 100%，然后又将其调回 62.5%？

javascript

window.total = 0;
window.target = 8;
var progress_percent_full = window.total / window.target;

function update_progress_bar() {
  progress_percent_full = (window.total / window.target) * 100;
  new_width = progress_percent_full + "%";

  $("#progress-bar").animate({
    width: new_width,
  });
  $("#progress-bar").text(total);
}

$("#button").click(function() {
  window.total = window.total + 1;
  update_progress_bar();
});

html

<button class="btn btn-lg btn-primary" id="button">
  Change bar
</button>

<div style="position: fixed; bottom: 0px; left: 0px; right: 0px; height: 75px; background: #dedede;">
        <div class="progress" style="max-width: 500px; margin: 0 auto; position: relative; top: 30px;">
            <div class="progress-bar" id="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="8"></div>
        </div>
    </div>

JSFiddle example显示正在发生的事情(点击按钮 5-6 次)

Answer 1

显然，当与百分比一起使用时，.animate() 方法并不那么可靠。作为替代方案，您可以使用像素值，如下所示:

function update_progress_bar() {
    var progress = (window.total / window.target),
        new_width = $("#progress-bar").parent().width() * progress;

    $("#progress-bar").animate({
        width: new_width,
    }).text(window.total);
}

或者，您可以删除 .animate() 方法，并使用 css 处理动画。你可以这样做:

<style>
.progress-bar {
    transition: width 1s;
}
<style>

function update_progress_bar() {
    progress_percent_full = (window.total / window.target) * 100;
    var new_width = progress_percent_full + "%";

    $("#progress-bar").width(new_width).text(total);
}