達到100％滿時關閉Bootstrap進度欄

Question

我正在做一個while循環，以將Bootstrap進度條從0填充到100 。

這可行，但是我要在進度條達到100％滿時隱藏進度條。 我嘗試使用setTimeOut失敗。

即使可以在微秒內完成0-100的while循環，該欄仍會逐漸填充。

 var i = 0; while(i <= 100){ $('#progress').attr('aria-valuenow', i).css('width', i + '%'); i++; } 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="progress"> <div id="progress" class="progress-bar progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> 

Answer 1

全部做完。 沒有Bootstrap使它變得容易得多。

 updateProgress(0); function updateProgress(i) { setTimeout(function() { if (i <= 100) { $('#progress').width(i + '%'); i++; updateProgress(i); } else { $('#progress').hide(); $('#progress').width('1%'); } }, 4); } 

 #progress { background-color: #007bff; height: 3px; left: 0; position: absolute; right: 0; top: 0; width: 1%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="progress"></div>