Javascript进度动画 [英] Javascript progress animation

问题描述

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

I am trying to build a progress bar using jQuery and javascript.

它基本上是一个吧

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

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

when you click on the next button (which isnt here) it changes the width of the progress div and using css3 it animates it nicely, but my problem here is the number. I have 5 screens so they are all 20% each and I would like to animate the numbers so while the bar is getting wider the number flicks through all numbers from 0% to 20% in the same time as the bar animation (0.5s)

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

I know with JQuery you could just use the innerHTML command and change it from 0% to 20% but I wanted to animate it.

知道怎么做吗？

推荐答案

第一次获取jQuery progressbar插件。
这是一个示例。

1st get the jQuery progressbar plugin. Here's an example.

然后创建一个类似的函数：

Then create a function like:

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);
     }
}

如果你看一下插件的例子，看看在这段代码中，你应该到达你想去的地方。我也使用过这段代码。

If you look at the examples of the plugin and look at this code, you should get to where you want to go. I've used this code as well.

这篇关于Javascript进度动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！