在动画完成之前，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。

我在这里缺少什么？