jQuery的動畫（）寬度持續時間

我想動畫的進度條的寬度，但無論我使用動畫的持續時間需要相同的時間。在Chrome中，它只是延遲。在Firefox中，動畫一開始速度較慢，而且速度較快。我不知道爲什麼會發生這種情況。jQuery的動畫（）寬度持續時間

var $progressBar = $(".progress-bar") 
 
$progressBar.animate({ 
 
    width: $progressBar.text() 
 
}, 5000);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12 col-sm-12"> 
 
    <div class="progress"> 
 
    <div class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:0%">60%</div> 
 
    </div> 
 
</div>

來源

2017-10-04 michel lompret

問題是因爲默認情況下引導的CSS爲.progress-bar元素應用於一個transition: width規則。這與動畫條的寬度jQuery的邏輯干擾，所以你需要重寫CSS規則刪除它，就像這樣：

var $progressBar = $(".progress-bar"); 
 
$progressBar.animate({ 
 
    width: $progressBar.text() 
 
}, 5000);

div .progress-bar { 
 
    transition: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12 col-sm-12"> 
 
    <div class="progress"> 
 
    <div class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:0%">60%</div> 
 
    </div> 
 
</div>

來源

2017-10-04 10:35:42

jQuery的動畫（）寬度持續時間

回答

相關問題