Element dynamiczny paska postępu Bootstrap - dynamicznie zmieniaj szerokość

Question

Mam 2 paski postępu na mojej stronie. Jedna to statyczna wersja HTML, druga jest tworzona dynamicznie przez jQuery. Jeśli chcę zmienić szerokość w jQuery, aby pasek postępu był "rozwijany", działa tylko statyczny.

Drugi jest natychmiast w 100% bez opóźnienia.

Oto kod dla lepszej reprezentacji: 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%"); 
}); 

Jak to naprawić?

Answer 1

Sprawdź to ..

new fiddle

Trzeba podkręcić swój kod js trochę. Robisz całą swoją pracę za jednym zamachem. jak to zrobić:

Kodeksu 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) 
});