Question

我想知道我是否可以通过动画十进制计数器获得一些帮助。

我有一切正常，但我希望计数达到100，但它总是以99.31％或99.56％的随机数结束。我尝试了很多不同的解决方案，但没有一个有效。

var percent_hours = $('.percent_hours').text();
$({numberValue: 0}).animate({numberValue: percent_hours}, {
    duration: 1100,
    easing: 'linear',
    step: function() {
        $('.percent_hours').text(Math.ceil(this.numberValue*100)/100 + "%");
    }

});

这是我的jsfiddle。

非常感谢任何帮助。

提前谢谢。

Answer 1

但是工作的答案是添加一个完整的答案。

var percent_hours = $('.percent_hours').text();
$({numberValue: 0}).animate({numberValue: percent_hours}, {
    duration: 1100,
    easing: 'linear',
    step: function() {
        $('.percent_hours').text(Math.ceil(this.numberValue*100)/100 + "%");
    },
    complete: function(){$('.percent_hours').text('100%')                     }

});

Answer 2

相应于docs：

step：为每个动画元素的每个动画属性调用的函数。此函数提供了修改Tween对象的机会，以便在设置之前更改属性的值。

也许我们正在寻找的是：

progress：在动画的每个步骤后调用的函数，每个动画元素只调用一次，而不管动画属性的数量（版本添加：1.8）

投入使用：

var percent_hours = $('.percent_hours').text();
$({numberValue: 0}).animate({numberValue: percent_hours}, {
  duration: 1100,
  easing: 'linear',
  progress: function() {
    $('.percent_hours').text(Math.ceil(this.numberValue*100)/100 + "%");
  }
});

FIDDLE： http://jsfiddle.net/q9CuK/125/

Answer 3

这是一个jQuery动画函数，可以处理小数和整数 JSFIDDLE： http://jsfiddle.net/totallytotallyamazing/rseaamdh/

 function changeNumbers(dec){
     $('.changeNum').each(function (index) {
        $(this).prop('Counter',0).animate({
            Counter: $('.pickNum').val()
     }, {
        duration: 1500,
        easing: 'swing',
        step: function (now) {
            if(dec === 10) {
                    $(this).text(Math.round(now*10)/10 + "%");
                 } else {
                     $(this).text(Math.round(now*1) + "%");
                 }
             }
         });
     });
 }

JQuery十进制计数动画

3 个答案: