jquery - jQuery动画回调在动画完成之前触发

Question

我想在我正在开发的 Rails 应用程序上制作进度条。我正在使用 Bootstrap 4 进度条。

这是我用来更改关于 ajax 请求的进度条宽度的代码。

<div class='progress' style='height: 1.5px;'>
  <div class='progress-bar' role='progress bar' style='width: 0%;' aria-valuenow = '0' aria-valuemin = '0' aria-valuemax = '100'>
  </div>
</div>



$(document).ajaxStart(function(event) {
   $('.progress-bar').animate({
      width: '87%'
    }, 700)
});


$(document).ajaxComplete(function(event) {
  $('.progress-bar').animate({
     width: '100%'
   }, 300, function() {
    $('.progress-bar').width('0');
  });
});

问题是动画回调在进度条宽度达到 100% 之前被执行。

进度条的宽度达到一半，然后突然变回 0。

我在这里想念什么？