Animation de la largeur de la barre de progression Bootstrap avec jQuery

Je veux animer une barre de progression de la largeur de 0% à 70% plus de 2,5 secondes. Toutefois, le code ci-dessous immédiatement les modifications de la largeur de 70% après 2,5 secondes de retard. Ce qui me manque?

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

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

source d'informationauteur user3088077

  1. 32

    Le problème est en défaut de Bootstrap effet de transition, qui anime toute mise à jour de la width propriété.

    Si vous l'éteignez avec supressing le style, cela fonctionnera très bien, par exemple:

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

    DÉMO: http://jsfiddle.net/WEYKL/1/

  2. 2

    IL EST très FACILE s'utilise bootstrap barre de progression,

    seulement ajouter l'attribut aria-valuenow="percent_required%" de div avec la classe "barre de progression", comme ceci:

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

    Prochain, sur le script:

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

    Recharger, Allez!

  3. 1

    Donc, il est plus judicieux d'ajuster l'effet de transition via CSS ou jQuery.

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

    Et il suffit de changer la valeur de la largeur.

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