2つの進捗バーの遷移とスタイルを変更

Question

データのロードの進行状況を表示するためにブートストラップの進捗バーを使用しています。問題は2つの進捗バーがあり、1つ（同じdivクラス）最初のページの読み込みとデータが最初の進行状況バーに表示され、非表示に設定され、2番目の進行状況バーが表示に設定されている場合のみ表示されますが、この2つのプログレスバーを隠すと表示する遷移アニメーションは滑らかではありません。プログレスバー1つのdivのように第二のプログレスバー意志

ここでは、プログレスバーのHTMLコードです：

<div id="progress2nd" class="progress" style="height:25px; background:transparent;"></div> 
<div id="progress1st" class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="'+totalPct+'" aria-valuemin="0" aria-valuemax="100" style="width:100%"> Loading Data (0.0%)</div> 

ここでjQueryのコードがあります：

$("#progress1st").hide(200); 
$("#progress2nd").html('<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="'+totalPct+'" aria-valuemin="0" aria-valuemax="100" style="width:' + totalPct + '%">'+'Loading Data ('+totalPct.toFixed(1)+'%)'+'</div>'); 

Answer 1

これを試してみてください：私は、プログレスバーのdiv要素をマージしたい$("#progress1st").hide();