javascript - 使用 jQuery 动画 Bootstrap 进度条宽度

Question

我想在 2.5 秒内将进度条的宽度从 0% 动画到 70%。然而，下面的代码在 2.5 秒延迟后立即将宽度更改为 70%。我错过了什么？

$(".progress-bar").animate({
    width: "70%"
}, 2500);

JSFiddle: http://jsfiddle.net/WEYKL/

Answer 1

问题出在默认的 Bootstrap 过渡效果中，该效果会对 width 属性的任何更新进行动画处理。

如果你通过抑制相应的样式来关闭它，它会正常工作，例如:

.progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

演示: http://jsfiddle.net/WEYKL/1/