Bootstrap进度条动态元素 - 动态更改宽度

Question

我的页面上有2个进度条。一个是静态HTML版本，另一个是通过jQuery动态创建的。如果我想改变jQuery中的宽度，以便进度条“正在进行”，那么只有静态工作正在进行。

另一个立即100％没有延迟。

这里是更好的代表性代码： https://jsfiddle.net/gezgind/DTcHh/7133/

HTML

<div class="container"> 
    <div id="reportbars"> 
     <div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;"> 
      <div class="progress-bar" id="tracking" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;"> 
       <span style="visibility:hidden">xxxx</span> 
      </div> 
     </div> 
     <button id="report_start" type="button" class="btn btn-default">Start</button> 
</div> 

JS

$("#report_start").click(function(){ 
    $("#reportbars").append(
     '<div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;">' + 
     '<div class="progress-bar" id="tracking1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;">' + 
     '<span style="visibility:hidden">Tracking 950.325</span>' + 
     '</div></div>' 
    ); 
    $("#tracking").css("width","100%"); 
    $("#tracking1").css("width","100%"); 
}); 

如何解决？

Answer 1

检查出来..

new fiddle

你要调整你的js代码点点。你正在做一切工作。做到这一点的：

JS代码：

/* Latest compiled and minified JavaScript included as External Resource */ 

$("#report_start").click(function(){ 


    $("#reportbars").append('<div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;">'+ 
          '<div class="progress-bar" id="tracking1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;">'+ 
           '<span style="visibility:hidden">Laufendes Tracking 950.325</span>'+ 
          '</div></div>'); 





    $("#tracking").css("width","100%"); 
    setTimeout(function(){$("#tracking1").css("width","100%");},10) 
});