Анимирование ширины полосы запуска Bootstrap с помощью jQuery

Я хочу анимировать ширину полосы выполнения от 0% до 70% за 2,5 секунды. Однако нижеприведенный код немедленно меняет ширину до 70% после задержки на 2,5 секунды. Что мне не хватает?

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

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

Ответ 1

Проблема заключается в эффекте перехода Bootstrap по умолчанию, который анимирует любое обновление свойства width.

Если вы отключите его с подавлением соответствующего стиля, он будет работать нормально, например:

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

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

Ответ 2

Итак, имеет смысл настроить эффект перехода через CSS или jQuery.

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

И просто измените значение ширины.

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

Ответ 3

IT очень ЛЕГКО, если используется индикатор выполнения bootstrap,

добавьте атрибут aria-valuenow = "percent_required%" в div с классом "progress-bar" следующим образом:

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

Далее, на script:

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

Reload, Go!