我正在使用 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 次)
最佳答案
显然,当与百分比一起使用时,.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);
}
关于JQuery 'animate' 函数无法平滑地设置 Bootstrap 进度条宽度的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47891934/