在为进度条执行jQuery.animate（）时，在7秒内从0到100计数

我有一个简单的进度条，必须在7秒内从0到100％宽度。 我处理操作没问题，只需要7秒钟。

代码实际上非常简单：

$('.progress-bar').animate({width:'100%'}, 7000); 

进度的宽度为0％，所以我需要将其设置为100％的动画。 我的问题是，我还需要从0到100进行计数，以与进行进度相同的方式显示百分比（在7秒内）。

我怎么能这样做？

谢谢！

Answer 1

http://jsfiddle.net/C23YM/9/

基本上将函数传递给step选项，并在每个step调用中，检查width是否是您可能具有的动画width ，例如两个属性被动画化。

来自文档 ：

请注意，为每个动画元素上的每个动画属性调用step函数。 例如，给定两个列表项，步骤函数在动画的每一步触发四次

 $('.progress-bar').animate( {width:'100%'}, { duration:7000, step: function(now, fx) { if(fx.prop == 'width') { $(this).html(Math.round(now * 100) / 100 + '%'); } } } );​ 

Answer 2

那样的东西？

 var starttime = (new Date()).getTime(); function updateTime() { var timediffPerc = ((new Date()).getTime() - starttime) / 70000; $('#percentage').text(timediffPerc.toFixed(2) + "%"); if(timediffPerc<100) window.setTimeout(updateTime, 100); } 

您将需要一个id =“percentage”的HTML元素，其中将显示百分比。

Answer 3

如果您查看动画文档http://api.jquery.com/animate/ ，您可以使用一种步骤方法，并在动画的每一步调用该方法。

.animate（）的第二个版本提供了一个步骤选项 – 在动画的每一步触发的回调函数。 此function对于启用自定义动画类型或在动画发生时更改动画非常有用。 它接受两个参数（now和fx），并将其设置为动画的DOM元素。

now：在每个步骤fx动画的属性的数值：对jQuery.fx原型对象的引用，它包含许多属性，例如动画元素的elem，开头和结尾的第一个和最后一个值动画属性，分别为动画属性的prop。

因此，您可以使用它来获取当前宽度值，以百分比forms获得一个与元素宽度完全匹配的值（例如70％获得70）

Answer 4

您可以使用动画“从”到“逻辑”;

 var _start = {property: 0}; var _end = {property: 100}; jQuery(_start).animate(_end, { duration: 7000, step: function() { $('.progress-bar').css('width', this.property + "%"); //console.log( 'Current percentage is ' + this.property );// You can write this to your bar } }); 

你可以参考这里

您可以在该页面中搜索“步骤”