【问题标题】：Animate Bootstrap progressbar动画引导进度条
【发布时间】：2016-10-27 16:58:21
【问题描述】：
我在进度条上使用带有 jquery 的动画时遇到了一些问题。我从数据库中检索了一些百分比并将其作为文本放在进度条 div 中，但我找不到更改动画属性中基本宽度的方法。是否可以根据进度条的当前值改变进度的颜色（即： red, yellow, else green）？
console.log($(".progress-bar").text())
$(".progress-bar").animate({
width: $(this).text() //I want to get the value inside the progressbar div but doesn't seems like to work
}, {
duration: 2000,
step: function(now, fx) {}
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 progress-container">
<div class="progress progress-striped active">
<!-- Part retrieved from the database -->
<div class="progress-bar progress-bar-success" style="width:0%">60%</div>
</div>
</div>
见demo on JSFiddle。
【问题讨论】：
标签：
javascript
jquery
html
twitter-bootstrap
【解决方案1】：
上下文有误。选项中的this 指的是窗口对象，而不是$(".progress-bar")
$( ".progress-bar" ).animate({
width: $( ".progress-bar" ).text()
}, {
duration: 2000,
step: function( now, fx ) {
$(this).removeClass (function (index, css) {
return (css.match (/(^|\s)progress-bar-\S+/g) || []).join(' ');
});
if (now < 33) {
$(this).addClass('progress-bar-danger');
} else if (now < 66) {
$(this).addClass('progress-bar-warning');
} else {
$(this).addClass('progress-bar-success');
}
}
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 progress-container">
<div class="progress progress-striped active">
<!-- Part retrieved from the database -->
<div class="progress-bar progress-bar-success" style="width:0%">60%</div>
</div>
</div>
这是你的工作example