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 + '%');

下面是一个正在进行中的动画示例：

关键是使用动画类中可用的step选项。

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