Animieren der Bootstrap-Fortschrittsbalkenbreite mit jQuery

Question

Ich möchte die Breite eines Fortschrittsbalkens innerhalb von 2,5 Sekunden von 0% auf 70% animieren. Der folgende Code ändert die Breite jedoch sofort nach einer Verzögerung von 2,5 Sekunden auf 70%. Was vermisse ich?

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

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

Answer 1

Das Problem ist in Standard-Bootstrap-Übergangseffekt, der jede Aktualisierung der width Eigenschaft animiert.

Wenn Sie es ausschalten mit dem entsprechenden Stil Unterdrückt, wird es in Ordnung, zum Beispiel arbeiten:

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

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

Answer 2

Also, macht es mehr Sinn, den Übergang Wirkung einzustellen über CSS oder jQuery.

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

Und ändern Sie einfach den Wert der Breite.

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

Answer 3

Es ist sehr einfach wenn Anwendungen Fortschrittsbalken Bootstrap

nur attrib aria-valuenow = "percent_required%" auf div mit der Klasse "Fortschrittsbalken" wie folgt hinzufügen:

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

nächste auf Skript:

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

neu laden, gehen Sie!