Question

我正在尝试编写jQuery函数，它会将进度条的宽度从0％设置为XY％，同时它还会激活数字增量（也从0％到XY％）。

到目前为止，我最终得到了这个 Page.html

＆＃13;

$('.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 + '%');
            }
        });
});

＆＃13;

/**
 * Progress bars with centered text
 */

.progress {
  position: relative;
}

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
}

＆＃13;

<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>

＆＃13;

问题是，进度条宽度的动画不平滑。数字增量工作正常，但看起来条形宽度动画跟不上。完成数字增量动画后，最后20％左右的宽度将在200ms内动画显示。

我不确定，有什么不对，有人可以帮我这个吗？

Answer 1

这可能是因为宽度css属性已经应用了缓动：

transition: width .6s ease;

这就是为什么酒吧的代表总是有点落后。

您可以通过添加以下内容来修复它：

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

Answer 2

您的问题是干扰过渡解：将其添加到样式

.progress-bar {
  transition:0s all !important
}

jQuery进度条宽度和数字动画不流畅

2 个答案: