0
jQuery関数を記述しようとしていますが、プログレスバーの幅を0％からXY％にアニメーション化すると同時に、数値インクリメントも0％からXY ％）。jQueryプログレスバーの幅と数値のアニメーションがスムーズでない
これまでのところ、私はこのPage.htmlになってしまった
$('.progress-bar').each(function() {
var bar = $(this);
var value = $(this).find('.count');
bar.prop('Counter', 0).animate({
Counter: parseFloat(bar.attr('aria-valuenow'))
},
{
duration: 3000,
easing: 'swing',
step: function(now) {
var number = parseFloat(Math.round(now * 100)/100).toFixed(2);
bar.css({ 'width': number + '%' });
value.text(number + '%');
}
});
});/**
* Progress bars with centered text
*/
.progress {
position: relative;
}
.progress span {
position: absolute;
display: block;
width: 100%;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="page.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="page.css">
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span class="count"></span>
</div>
</div>
</body>
</html>問題は、プログレスバーの幅のアニメーションがスムーズでないこと、です。 数値の増分はうまくいきますが、バー幅のアニメーションが追いつかないようです。数値増分アニメーションが完了すると、幅の最後の20％程度が200msでアニメーション化されます。
私は本当に分かりませんが、何が間違っていますか？
transition: width .6s ease;
バーの表現は常に少し遅れている理由です：幅CSS属性がすでに適用緩和を持っているので、可能性があり