jquery - jQuery animate()宽度持续时间

我正在尝试为进度条的宽度设置动画，但是无论我使用动画多长时间都需要花费相同的时间。在Chrome中，它只是延迟。在Firefox中，动画的开始速度很慢，而en的速度更快。我不知道为什么会这样。

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>

最佳答案

问题是因为默认情况下，Bootstrap在CSS中将transition: width规则应用于.progress-bar元素。这会干扰动画条宽度的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>

关于jquery - jQuery animate()宽度持续时间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46562609/