Elemento dinamico barra di avanzamento Bootstrap - Cambia larghezza dinamicamente

Question

Ho 2 barre di avanzamento sulla mia pagina. Uno è una versione HTML statica, l'altro è creato dinamicamente tramite jQuery. Se voglio cambiare la larghezza in jQuery in modo che la barra di avanzamento sia "progredita", solo quella statica funziona.

L'altro è istantaneamente al 100% senza ritardo.

Ecco il codice per la migliore rappresentazione: 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%"); 
}); 

Come posso risolvere?

Answer 1

Check it out ..

new fiddle

si deve modificare il codice js po '. Stai facendo tutto il tuo lavoro in un colpo solo. farlo come:

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