Count up to number, then count from there to a different number (at different speed)-CodePudding

Is it possible to count up a number to a certain point, then once it hits that number, count from there up to a different number using Jquery?

Essentially I want to get to the first number quite quickly, then want to animate to the second number at a much slower pace.

I can't quite get it to switch smoothly to the second number. It just instantly jumps to the very final number. Where am I going wrong?

$({ Counter: 0 }).animate({
  Counter: $('.Single').text()
}, {
  duration: 1000,
  easing: 'swing',
  step: function() {
    $('.Single').text(Math.ceil(this.Counter));
  },
  complete: function() {
    checker();
  }
});

function checker() {
  base = parseInt($(".Single").text());
  per_day = 24;
  newtarget = (base   per_day);
  $(".Single").replaceWith(newtarget);

  $({ Counter: base }).animate({
    Counter: $('.Single').text()
  }, {
    duration: 3000,
    easing: 'swing',
    step: function() {
      $('.Single').text(Math.ceil(this.Counter));
    },
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span >24</span>

CodePudding user response：

Instead of replaceWith use .text - replace with gets rid of your element and replaces it with the number, text will put the number inside the element

const $div = $('.Single');
$div.animate({
  Counter: $div.text()
}, {
  duration: 1000,
  easing: 'swing',
  step: function (now) {
      $div.text(Math.ceil(now));
  },
  complete: function() {
    checker();
  }
});


function checker() {
  base = parseInt($div.text());
  per_day = 24;
  newtarget = (base   per_day);
  $div.text(newtarget);                 // change this line

  $({ Counter: base }).animate({
    Counter: $div.text()
  }, {
    duration: 3000,
    easing: 'swing',
    step: function() {
      $div.text(Math.ceil(this.Counter));
    },
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span >30000</span>

CodePudding user response：

aww someone beat me to the punch...well encase it helps :

$({
  countNum: 0
}).animate({
  countNum: $('.Single').text()
}, {
  duration: 10000,
  easing: 'swing',
  step: function() {
    $('.Single').text(Math.ceil(this.countNum));
  },
  complete: function() {
    checker();
  }
});

function checker() {
  base = parseInt($(".Single").text());
  per_day = 24;
  newtarget = (base   per_day);
  $({
    countNum: per_day
  }).animate({
    countNum: newtarget
  }, {
    duration: 30000,
    easing: 'swing',
    step: function() {
      $('.Single').text(Math.ceil(this.countNum));
    },
    complete: function() {
      console.log('complete')
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span >24</span>