Javascript 进度动画

Question

我正在尝试使用 jQuery 和 javascript 构建进度条。

它基本上是一个酒吧

<div id="progressbar"><div id="progress"></div>
<div id="number">0%</div>

当您单击下一步按钮(此处不存在)时，它会更改进度 div 的宽度并使用 css3 将其动画化，但我的问题在于数字。我有 5 个屏幕，所以它们每个都是 20%，我想为数字设置动画，所以当条形变宽时，数字在条形动画(0.5 秒)的同时从 0% 到 20% 的所有数字闪烁

我知道使用 JQuery，您可以只使用 innerHTML 命令并将其从 0% 更改为 20%，但我想为其设置动画。

知道怎么做吗？

Answer 1

首先获取 jQuery 进度条插件。这是一个 example .

然后创建一个像这样的函数:

num = 0;
function pbUpdate(value){
     if (num <= value) {
          window.setInterval('updAnimation(' + value + ')', 10);
     }else{
          clearTimeout;
     }
}

function updAnimation(value){
     num += 1;
     if (num <= value){
          $("#pb").reportprogress(num);
     }
}

如果您查看插件的示例并查看这段代码，您应该可以到达您想去的地方。我也用过这段代码。