jquery - 100% 后隐藏 Bootstrap 进度条

Question

我想在完成动画(100%)后隐藏一个进度条。我该怎么做？这是有效的代码，但我只是不知道之后如何隐藏它:

$(".progress-bar").animate({
  width: "100%"
}, 5000);

.progress.active .progress-bar {
  -webkit-transition: none !important;
  transition: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 progress-container">
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:0%">Loading...</div>
  </div>
</div>

还有一个 Fiddle 来展示它(我的代码是基于它的，这个 fiddle 所做的是在 2.5 秒内从 0 加载到 70%，但它与我正在做的完全一样:http://jsfiddle.net/WEYKL/1/

Answer 1

您可以使用 complete来自 jQuery's animate 的功能:

$(".progress-bar").animate({
    width: "100%"
}, 5000, function() {
    $(this).closest('.progress').fadeOut();
});