Chiều rộng thanh tiến trình hoạt hình Bootstrap với jQuery

Question

Tôi muốn làm động độ rộng của thanh tiến trình từ 0% đến 70% trong 2,5 giây. Tuy nhiên, mã dưới đây ngay lập tức thay đổi chiều rộng thành 70% sau một sự chậm trễ 2,5 giây. Tôi đang thiếu gì?

$(".progress-bar").animate({ 
    width: "70%" 
}, 2500); 

JSFiddle:http://jsfiddle.net/WEYKL/

Answer 1

Vấn đề là ở mặc định Bootstrap hiệu ứng chuyển, mà sinh động bất kỳ bản cập nhật của width tài sản.

Nếu bạn tắt với supressing phong cách tương ứng, nó sẽ làm việc tốt, ví dụ:

.progress-bar { 
    -webkit-transition: none !important; 
    transition: none !important; 
} 

DEMO:http://jsfiddle.net/WEYKL/1/

Answer 2

Vì vậy, nó làm cho ý nghĩa hơn để điều chỉnh hiệu ứng chuyển qua CSS hoặc jQuery.

.progress-bar { 
    -webkit-transition: width 2.5s ease; 
    transition: width 2.5s ease; 
} 

Và chỉ thay đổi giá trị độ rộng.

$(".progress-bar").css('width', '70%'); 

Answer 3

'S nó rất dễ dàng nếu sử dụng bootstrap thanh tiến trình,

chỉ thêm attrib aria-valuenow = "% percent_required" để div với class "tiến-bar" như thế này:

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="57%" aria-valuemin="0" aria-valuemax="57"> 

Tiếp theo, trên tập lệnh:

<script> 
    $(document).on('ready',function(){ 
    $('.progress .progress-bar').css("width",function() { 
     return $(this).attr("aria-valuenow") + "%"; 
    }) 
    }) 
</script> 

Tải lại, Go!