使用jQuery更改Bootstrap动画进度条动画持续时间 [英] Changing Bootstrap animation progress bar animation duration with jQuery

问题描述

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

I'm trying to change the duration of the CSS3 animation used on the Twitter Bootstrap animated progress bar. My desired result is to decrease the duration of the animation using jQuery so that I have a faster animation.

我有以下HTML和CSS以及使用以下jQuery。

I've got the following HTML and CSS and used the following 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作为我的测试浏览器，但我似乎在所有浏览器中都有这种行为。

I'm using the following jQuery to change the values but this doesn't seem to have any effect. I'm using Chrome as my test browser but I seem to get the behavior in all browsers.

jQuery：

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

如果我在执行jQuery后获取animation-duration的值，则读取为1s为与默认的2s相反，但视觉效果保持不变。

If I fetch the value of animation-duration after executing the jQuery it reads as being "1s" as opposed to the default "2s" but the visual effect remains unchanged.

编辑：使用jQuery隐藏并在设置值后显示元素似乎可以使效果起作用Internet Explorer。

Using jQuery to hide and show the element after setting the value seems to get the effect working for Internet Explorer.

推荐答案

好像至少Chrome没有检测到css属性动画中的变化-duration 。但是，通过删除然后重新添加 progress-bar 类，更改 animation-duration 时的动画工作时进度条类的重新添加是在 setTimeout 中完成的。

It seems like at least Chrome does not detect the change in the css property animation-duration. However, by removing and then re-adding the progress-bar class the animation when changing the animation-duration works when the re-adding of the progress-bar class is done in a setTimeout.

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

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

This looks seriously ugly and error prone, but it works.

另一个，在我看来更好的方式是设置所有动画属性。无需添加和删除进度栏类，即可实现此目的：

Another and in my opinion better way would be to set all animation properties. This works without having to fiddle around with adding and removing of the progress-bar class:

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

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