Jquery动画百分比计数器

在我的投票系统中，我想显示一个投票百分比。这个百分比在ajax请求（成功响应）中给出并计算。我想创建一个像实时计数器一样的东西（如果投票率或多或少的话）

比方说，现在的投票是40，成功的反应是50，我想显示计数器从40计数到50（动画）

我试着这样做：

<b class="countPercentage">40%</b>

$('.countPercentage').animated().text(data.percentage);

40%
$（'.countPercentage'）.animated（）.text（data.percentage）；

但没有成功，它只将值从40更改为50

提前谢谢！

---

尼克

您需要自己创建计数器。当然，可以根据

diff

的数量调整定时

JavaScript

var display = $('.countPercentage > span');

var currentValue = parseInt(display.text());
var nextValue    = data.percentage;

var diff         = nextValue - currentValue;
var step         = ( 0 < diff ? 1 : -1 ); 

for (var i = 0; i < Math.abs(diff); ++i) {
    setTimeout(function() {
        currentValue += step
        display.text(currentValue);
    }, 100 * i)   
}

var display=$（'.countPercentage>span'）；
var currentValue=parseInt（display.text（））；
var nextValue=数据百分比；
var diff=下一个值-当前值；
var阶跃=（0

演示

---

创建您自己的百分比计数器的另一种方法（您可以在以下位置看到它的作用）：

函数计时器（）{
if（animator.curPercentageanimator.targetPercentage）{
animator.curPercentage-=1；
}                
$（animator.outputSelector）.text（animator.curPercentage+“%”）；
if（animator.curPercentage！=animator.targetPercentage）{
setTimeout（计时器、animator.animationSpeed）
}
}
函数PercentageAnimator（）{
这个.animationSpeed=50；
这个百分比=0；
这个.targetPercentage=0；
this.outputSelector=“.countPercentage”；
this.animate=函数（百分比）{
this.targetPercentage=百分比；
setTimeout（计时器，this.animationSpeed）；
}    
}
var animator=新的PercentageAnimator（）；
animator.curPercentage=40；
动画制作（70）；

非常晚，但我在squarespace中使用了类似的。只是不是百分数。我对编码的了解还不够，无法了解差异，但这是HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
var a = 0;
$(window).scroll(function() {

var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');
  $({
    countNum: $this.text()
  }).animate({
      countNum: countTo
    },
    {
      duration: 2000,
      easing: 'swing',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
      }
      });
 });
 a = 1;
 }
 });
 </script>
<div id="counter">
 <div class="sqs-col sqs-col-4 counter-value" data-count="58" data-
 desc=>0</div>  
<div class="sqs-col sqs-col-4 counter-value" data-count="42" data-
 desc=>0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="88" data-
desc=>0</div>
</div>


<style>
  .counter-value { 
font-size: 60px;
line-height:2em;
text-align:center;
padding:17px 0;
 }
.counter-value:after {
content: attr(data-desc);
display:block;
text-transform:uppercase;
font-size: 14px;
line-height:1.2em;

var a=0；
$（窗口）。滚动（函数（）{
var oTop=$（'#counter'）.offset（）.top-window.innerHeight；
if（a==0&&$（window.scrollTop（）>oTop）{
$（'.counter value'）。每个（函数（）{
变量$this=$（this），
countTo=$this.attr（'data-count'）；
$({
countNum:$this.text（）
}).制作动画({
countNum:countTo
},
{
期限：2000年，
放松:"摇摆",，
步骤：函数（）{
$this.text（Math.floor（this.countNum））；
},
完成：函数（）{
$this.text（this.countNum）；
}
});
});
a=1；
}
});
0
0
0
.计数器值{
字体大小：60px；
线高：2米；
文本对齐：居中；
填充：17px0；
}
.计数器值：在{
内容：attr（数据描述）；
显示：块；
文本转换：大写；
字体大小：14px；
线高：1.2米；

i like it“购买前试用”的可能重复项：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
var a = 0;
$(window).scroll(function() {

var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');
  $({
    countNum: $this.text()
  }).animate({
      countNum: countTo
    },
    {
      duration: 2000,
      easing: 'swing',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
      }
      });
 });
 a = 1;
 }
 });
 </script>
<div id="counter">
 <div class="sqs-col sqs-col-4 counter-value" data-count="58" data-
 desc=>0</div>  
<div class="sqs-col sqs-col-4 counter-value" data-count="42" data-
 desc=>0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="88" data-
desc=>0</div>
</div>


<style>
  .counter-value { 
font-size: 60px;
line-height:2em;
text-align:center;
padding:17px 0;
 }
.counter-value:after {
content: attr(data-desc);
display:block;
text-transform:uppercase;
font-size: 14px;
line-height:1.2em;