更改2个进度条的转换和样式

时间:2016-08-22 08:59:50

标签: javascript jquery html css twitter-bootstrap-3

我正在使用bootstrap进度条来显示加载数据的进度,问题是我有2个进度条我想合并为一个(相同的div类),第一个进度条只出现在第一页加载和之后数据进入我设置隐藏的第一个进度条和我设置显示的第二个进度条,但隐藏和显示此2进度条之间的过渡动​​画不顺畅,我想将进度条设为1 div所以第2个进度条将

这是进度条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>');

1 个答案:

答案 0 :(得分:0)

试试这个:删除隐藏div的转换时间

$("#progress1st").hide(200);更改为$("#progress1st").hide();