Question

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

基本上是一个酒吧

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

当你点击下一个按钮（这不是这里）时，它改变了进度div的宽度，并使用css3很好地动画了它，但我的问题是数字。我有5个屏幕，所以它们都是20％，我想为数字设置动画，这样当条形变宽时，数字会在条形动画（0.5s）的同时从0％到20％闪烁所有数字

我知道使用JQuery你可以使用innerHTML命令并将其从0％更改为20％但我想为它设置动画。

知道怎么做吗？

Answer 1

1获取jQuery progressbar插件。这是一个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);
     }
}

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

Javascript进度动画

1 个答案: