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>

并且还有一个小提琴来展示它(我的代码基于此,这个小提琴的作用是在2.5秒内从0加载到70%,但它与我正在做的完全相同:http://jsfiddle.net/WEYKL/1 /

Answer 1

你可以使用jQuery中的complete函数:animate

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