使用jQuery动画Bootstrap进度条宽度

Question

我希望在2.5秒内将进度条的宽度设置为0％到70％。但是，下面的代码会在2.5秒延迟后立即将宽度更改为70％。我错过了什么？

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

的jsfiddle：http://jsfiddle.net/WEYKL/

Answer 1

问题在于默认的Bootstrap过渡效果，它可以激活width属性的任何更新。

如果你通过抑制相应的样式来关闭它，它将工作正常，例如：

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

但是：ぁzxswい

Answer 2

如果使用bootstrap进度条，那非常容易，

只将属性aria-valuenow =“percent required％”添加到具有“progress-bar”类的div，如下所示：

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

接下来，在脚本上：

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

重新加载，开始！

Answer 3

因此，通过CSS或jQuery调整转换效果更有意义。

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

只需更改宽度值即可。

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

Answer 4

你可以通过添加：

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

.progress .progress-bar {
  transition: unset;
}

var delay = 500;
$(".progress-bar").each(function(i) {
  $(this).delay(delay * i).animate({
    width: $(this).attr('aria-valuenow') + '%'
  }, delay);

  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: delay,
    // easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now) + '%');
    }
  });
});

.progress {
  margin-bottom: 20px;
}

.progress-bar {
  width: 0;
}

.bg-purple {
  background-color: #825CD6 !important;
}

.progress .progress-bar {
  transition: unset;
}