使用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/

Answer 2

因此，通过 CSS 或 jQuery 调整过渡效果更有意义。

.progress-bar {
    -webkit-transition: width 2.5s ease;
    transition: width 2.5s ease;
}

只需更改宽度值。

$(".progress-bar").css('width', '70%');