JQuery'；制作动画'；函数不'；t平滑设置引导进度条宽度的动画

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

我已经设计了一个功能，当从第一步到第四步改变条形图的动画时，它可以很好地工作。然而，当第五步出现时，由于某种原因，在返回到50%之前，该条动画设置为100%。同样的事情发生在步骤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>

更改栏

---

显示正在发生的事情（按按钮5-6次）

显然，与百分比一起使用时，

.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);
}

.进度条{
过渡：宽度1s；
}
函数更新\进度\条（）{
进度百分比满=（window.total/window.target）*100；
var new_width=progress_percent_full+“%”；
$（“#进度条”）.width（新宽度）.text（总计）；
}

太棒了。谢谢你的帮助！