jQuery在特定时间内增加特定数字

Question

我有一个问题。知道如何在特定时间内将特定数量增加到更大的数字吗？（使用jQuery）例如，我想制作百分比条，当条形滑动到特定大小的同时将数字从0增加到100.我创建酒吧但是避风港想知道如何在特定时间内实现数字转换。在视觉上，它看起来像这样：

Answer 1

以下是向您展示如何根据填充金额获取百分比的示例：http://jsfiddle.net/jYveX/

基本上我找出父包装器的宽度（400），然后是填充的宽度（200），并使用jquery进行简单的计算。 400/200 = 50。

现在，当你增加填充条的大小时，百分比应该随着条的宽度而变化。

HTML

<div class="bar-container">
    <div class="bar-fill">
        <div class="output"></div>
    </div>
</div>

CSS

.bar-container {
    width:400px;
    height:40px;
    background:green;
}
.bar-fill {
    width:200px;
    height:40px;
    background:red;
    text-align:right;
}

JS

$('.output').html($('.bar-fill').width() / 4 + '%');

这是正在进行的动画的一个示例：

关键是使用animate class中提供的步骤选项。

http://jsfiddle.net/jYveX/4/