使用jQuery动画Bootstrap进度条宽度 [英] Animating Bootstrap progress bar width with jQuery

问题描述

我希望在2.5秒内将进度条的宽度设置为0％到70％。但是，下面的代码会在2.5秒延迟后立即将宽度更改为70％。我错过了什么？

I want to animate a progress bar's width from 0% to 70% over 2.5 seconds. However, the code below immediately changes the width to 70% after a 2.5 second delay. What am I missing?

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

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

推荐答案

问题在于默认的Bootstrap过渡效果，它会动画 width 属性的任何更新。

The problem is in default Bootstrap transition effect, which animates any update of the width property.

如果你关闭它压制相应的风格，它会工作正常，例如：

If you switch it off with supressing the corresponding style, it will work fine, e.g.:

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

DEMO： http://jsfiddle.net/WEYKL/1/

这篇关于使用jQuery动画Bootstrap进度条宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！