Yếu tố động thanh thanh tiến trình khởi động - Thay đổi chiều rộng động

Question

Tôi có 2 thanh tiến trình trên trang của mình. Một là một phiên bản HTML tĩnh, một phiên bản khác được tạo động thông qua jQuery. Nếu tôi muốn thay đổi chiều rộng trong jQuery để thanh tiến trình đang được "tiến hành" chỉ có một tĩnh đang làm việc.

Số khác ngay lập tức ở mức 100% mà không bị trì hoãn.

Đây là Bộ luật cho đại diện tốt hơn: 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%"); 
}); 

Làm thế nào để khắc phục?

Answer 1

Kiểm tra nó ra ..

new fiddle

Bạn cần phải tinh chỉnh mã js chút bạn. Bạn đang làm tất cả công việc của bạn trong một lần. làm điều đó như:

Mã 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) 
});