jQuery的动画()宽度持续时间
问题描述:
我想动画的进度条的宽度,但无论我使用动画的持续时间需要相同的时间。在Chrome中,它只是延迟。在Firefox中,动画一开始速度较慢,而且速度较快。我不知道为什么会发生这种情况。jQuery的动画()宽度持续时间
var $progressBar = $(".progress-bar")
$progressBar.animate({
width: $progressBar.text()
}, 5000);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:0%">60%</div>
</div>
</div>
答
问题是因为默认情况下引导的CSS为.progress-bar
元素应用于一个transition: width
规则。这与动画条的宽度jQuery的逻辑干扰,所以你需要重写CSS规则删除它,就像这样:
var $progressBar = $(".progress-bar");
$progressBar.animate({
width: $progressBar.text()
}, 5000);
div .progress-bar {
transition: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:0%">60%</div>
</div>
</div>