JQuery decimal score animated

I was wondering if I could help with the animation of the decimal counter.

Everything works for me, but I want the account to increase to 100, but it always falls into random numbers, such as 99.31% or 99.56%. I tried many different solutions, but none of them worked.

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

});

Here is my jsfiddle .

Any help would be greatly appreciated.

Thanks in advance.

+4
source share
3 answers

According to 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/

+3

hokey, .

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%')                     }

});
+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) + "%");
                 }
             }
         });
     });
 }
0

Source: https://habr.com/ru/post/1547965/


All Articles