jQuery animate() width duration

Question

Ich versuche, die Breite eines Fortschrittsbalkens zu animieren, aber egal, welche Dauer ich verwende, nimmt die Animation die gleiche Zeit. In Chrome verzögert es sich nur. In Firefox ist die Animation am Anfang langsam und im En schneller. Ich weiß nicht, warum das passiert.

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>

Answer 1

Das Problem ist, da standardmäßig Bootstrap eine transition: width Regel auf dem CSS für das Element .progress-bar gilt. Dies ist mit der jQuery-Logik zu stören, die die Breite des Stabes beseelt, so müssen Sie diese CSS-Regel außer Kraft zu setzen, es zu entfernen, wie folgt aus:

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>