Animazione della larghezza della barra di avanzamento Bootstrap con jQuery

Question

Desidero animare la larghezza della barra di avanzamento da 0% a 70% su 2,5 secondi. Tuttavia, il codice seguente modifica immediatamente la larghezza al 70% dopo un ritardo di 2,5 secondi. Cosa mi manca?

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

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

Answer 1

Il problema è in effetti di transizione Bootstrap predefinita, che anima ogni aggiornamento della struttura width.

Se si passa fuori con sopprimendo lo stile corrispondente, funzionerà bene, ad esempio:

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

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

Answer 2

Quindi, ha più senso per regolare l'effetto di transizione tramite CSS o jQuery.

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

E basta cambiare il valore della larghezza.

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

Answer 3

E 'molto facile se usi bootstrap barra di avanzamento,

aggiungere solo attrib aria-valuenow = "% percent_required" per div con classe "progresso-bar" in questo modo:

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

Avanti, su sceneggiatura:

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

Reload, Go!