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

Question

我正在使用 Bootstrap 进度条来显示加载数据的进度，问题是我有 2 个进度条我想合并为一个(相同的 div 类)，第一个进度条仅在第一页加载时和之后出现数据来 self 设置为隐藏的第一个进度条和我设置为显示的第二个进度条，但是隐藏和显示这两个进度条之间的过渡动​​画不流畅，我想将进度条设置为 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(200); 更改为 $("#progress1st").hide();