使用 jQuery 更改 Bootstrap 动画进度条动画持续时间

我正在尝试更改 Twitter Bootstrap 动画进度条上使用的 CSS3 动画的持续时间。 我想要的结果是使用 jQuery 减少动画的持续时间，以便获得更快的动画。

我有以下 HTML 和 CSS 并使用了以下 jQuery。

HTML:

<div class="progress progress-striped active" style="width:102px;">
    <div id="test" class="progress-bar" role="progressbar">
    </div>
</div>

CSS:

.progress-bar {
    background-color: #bd4a61;
    width: 100%;
}

我正在使用以下 jQuery 来更改值，但这似乎没有任何效果。我使用 Chrome 作为测试浏览器，但我似乎在所有浏览器中都得到了该行为。

jQuery:

$("#test").css("-webkit-animation-duration", "1s");

如果我在执行 jQuery 后获取动画持续时间的值，它会读取为“1s”，而不是默认的“2s”，但视觉效果保持不变。

编辑：设置值后使用 jQuery 隐藏和显示元素似乎可以获得适用于 Internet Explorer 的效果。

看来至少 Chrome 没有检测到 css 属性的变化animation-duration。但是，通过删除然后重新添加progress-bar更改时对动画进行分类animation-duration当重新添加进度条类完成时有效setTimeout.

$('#test').css('animation-duration', '0.1s').removeClass('progress-bar');
setTimeout(function() { 
    $('#test').addClass('progress-bar');
}, 1);

这看起来非常丑陋并且容易出错，但它确实有效。

另一种我认为更好的方式将设置所有动画属性。这不需要费力地添加和删除progress-bar class:

var secondFraction = '0.2'
$('#test').css('animation', secondFraction + 's linear 0s normal none infinite progress-bar-stripes');