Jquery animated percentage counter

Question

在我的投票系統中，我想顯示投票率。這個百分比是在ajax請求（成功響應）中給出和計算的。我想創建一個類似於活動櫃檯的東西（如果投票比例多或少）。

比方說，現在的投票是40，成功的迴應是50回來，我想顯示的計數器從40到50（動畫）。

我想這是：

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

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

但沒有成功，它改變了只提前40至50

感謝價值！ 尼克

Answer 1

您需要自己創建計數器。當然，時間可以調整，也許根據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) 
} 

演示

Try before buy

Answer 2

創建自己的百分比計的另一種方式（你可以看到它在行動，在http://jsfiddle.net/CEbGA/）：

function timer() { 
    if (animator.curPercentage < animator.targetPercentage) { 
     animator.curPercentage += 1;  
    } else if (animator.curPercentage > animator.targetPercentage) { 
     animator.curPercentage -= 1;  
    }     

    $(animator.outputSelector).text(animator.curPercentage + "%"); 

    if (animator.curPercentage != animator.targetPercentage) { 
     setTimeout(timer, animator.animationSpeed)  
    } 
} 

function PercentageAnimator() { 
    this.animationSpeed = 50; 
    this.curPercentage = 0; 
    this.targetPercentage = 0; 
    this.outputSelector = ".countPercentage"; 

    this.animate = function(percentage) { 
     this.targetPercentage = percentage; 
     setTimeout(timer, this.animationSpeed); 
    }  
} 

var animator = new PercentageAnimator(); 
animator.curPercentage = 40; 
animator.animate(70); 

Answer 3

超級晚，但是，我用了一個類似的爲我的方格空間。只是不百分之百。我不知道有足夠的瞭解編碼知道方差，但嘿，這裏的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; 

[jQuery的計數器計數到目標數（指