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的动画（）宽度持续时间

回答

相关问题