Javascript 如何添加动画；0到一个数字；？jQuery

我希望当我点击一个按钮时，div的百分比从0到div的数量变化得非常快。 如何在代码中实现动画

JSFiddle：

jQuery：

var counter = localStorage.getItem('rans') || 0;
var counter = Number(localStorage.getItem('rans')) || 0;
var counter1 = Number(localStorage.getItem('bans')) || 0;

$('.redanswer').click(function(){
     localStorage.setItem('rans', ++counter);
     $( '.bpercent' ).html( counter1 * 100 / (counter1+counter) + "%" );
     $( '.rpercent' ).html( counter * 100 / (counter1+counter) + "%" );
     $('.rpercent').animateNumber({ number: 'rans' });


});

var counter1 = localStorage.getItem('bans') || 0;
var counter = Number(localStorage.getItem('rans')) || 0;
var counter1 = Number(localStorage.getItem('bans')) || 0;

$('.blueanswer').click(function(){
     localStorage.setItem('bans', ++counter1);
     $( '.rpercent' ).text( counter * 100 / (counter1+counter) + "%" );
     $( '.bpercent' ).text( counter1 * 100 / (counter1+counter) + "%" );
});

---

您的代码不是干巴巴的，可以浓缩并分解为函数。对于动画，可以使用带有计时器的简单while循环。下面是一个带有时间的while循环的示例。根据动画的播放速度，您希望睡眠时间更短/更长

---

查看中的一个工作示例，查看Enkode提供的链接。 在这里，我创建了一个自调用循环，它可以执行您指定的任何操作，在本例中为100

$(".clickButton").click(function() {
   var counter = 0;
   var timeDelay = 10; // in millisecond
   var endCount= 100;  // end of loop

   (function loopFunc (counter) {
      setTimeout(function () {
         $("p").html(counter + "%");                

         if (counter++ < endCount) loopFunc(counter);   
      }, timeDelay)
    })(1); 
});

$（“.clickButton”）。单击（函数（）{
var计数器=0；
var timeDelay=10；//以毫秒为单位
var endCount=100；//循环结束
（函数loopFunc（计数器）{
setTimeout（函数（）{
$（“p”）.html（计数器+“%”）；
if（计数器+++

---

单击

。单击按钮
，将调用循环。然后，一个
setTimeout
函数在循环迭代中创建一个暂停。
您正在毫无意义地覆盖变量。最后，非常感谢您