我正在使用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次)
答案 0 :(得分:2)
显然,.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);
}