Javascript 设置引导进度条的动画

我在进度条上使用jquery动画时遇到一些问题。我从数据库中检索了一些百分比，并将其作为文本放在进度条div中，但我找不到在动画属性中更改基础宽度的方法。是否可以根据进度条的当前值更改进度的颜色（即：<33%->红色，<66%->黄色，或绿色）

console.log（$（“.progress bar”）.text（）
$（“.progress bar”）.animate({
宽度：$（this）.text（）//我想获取progressbar div中的值，但似乎不起作用
}, {
期限：2000年，
步骤：函数（现在，fx）{}
});

60%
上下文有错误<代码>此

在选项中指的是窗口对象，而不是

$（“.progress bar”）

$（“.progress bar”）。制作动画({
宽度：$（“.progress bar”）.text（）
}, {
期限：2000年，
步骤：函数（现在，fx）{
$（this）.removeClass（函数（索引，css）{
返回（css.match（/（^ |\s）进度条-\s+/g）| |[]）。连接（“”）；
});
如果（现在<33）{
$（this.addClass（'progress-bar-danger'）；
}否则如果（现在<66）{
$（this.addClass（'progress-bar-warning'）；
}否则{
$（this.addClass（'progress-bar-success'）；
}
}
});

60%
如果它解决了您的问题，请将此标记为正确答案：）完成，我编辑了您给我的JSFIDLE，这样它就可以处理颜色了，您能编辑您的答案，让寻找运行时颜色的人可以看到吗？