更改2进度条的过渡和样式

Question

I'm using bootstrap progress bar to show the progress of loading data, the problem is i have 2 progress bar i want to merge as one (same div class), the first progress bar only appear when first page load and after data comes in the first progress bar i set to hide and the second progress bar i set to show, but the transition animation between hide and show this 2 progress bar is not smooth, i want to make the progress bar as 1 div so the 2nd progress bar will

here's the progress bar html code :

<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>

here's the jquery code:

$("#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

Try this : remove transition time of hiding a div

change $("#progress1st").hide(200); to $("#progress1st").hide();