使用jQuery更改引導程序動畫進度條動畫持續時間

Question

我試圖更改Twitter引導動畫進度條上使用的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爲「1」，而不是默認的「2秒」，但在視覺效果上保持不變後的值。

編輯：使用jQuery隱藏和顯示設置值後的元素似乎得到的效果爲Internet Explorer的工作。

Answer 1

看來至少Chrome並未檢測到css屬性animation-duration中的更改。但是，如果在setTimeout中重新添加進度條類時刪除progress-bar類，然後重新添加progress-bar類，則更改animation-duration時的動畫將生效。

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

這看起來嚴重醜陋和容易出錯，但它的工作原理。

另一種在我看來更好的方法將設置所有的動畫屬性。此作品無需添加和刪除progress-bar類別：

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