2

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

代码其实很简单：

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

进度的宽度是 0%，所以我只需要将其设置为 100%。我的问题是我还需要从 0 数到 100 以显示百分比，就像我对进度所做的那样（在 7 秒内）。

我该怎么做？

谢谢！

4

4 回答 4

7

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

基本上将一个函数传递给step选项，并在每次step调用时检查是否width是动画，因为您可能有，例如两个属性正在动画。

从文档：

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

$('.progress-bar').animate(
    {width:'100%'}, 
    {
        duration:7000,
        step: function(now, fx) {
           if(fx.prop == 'width') {
               $(this).html(Math.round(now * 100) / 100 + '%');
           }
        }
    }        
);​
于 2012-04-25T09:52:40.773 回答
1

类似的东西？

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 元素，其中将显示百分比。

于 2012-04-25T09:46:03.920 回答
1

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

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

    }
});

你可以参考这里

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

于 2012-04-25T09:46:45.627 回答
1

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

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

now：每一步动画属性的数值 fx：对 jQuery.fx 原型对象的引用，其中包含许多属性，例如动画元素的 elem，第一个和最后一个值的 start 和 end分别为动画属性和被动画属性的道具。

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

于 2012-04-25T09:46:52.087 回答