Question 37075 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Count up to number, then count from there to a different number (at different speed) – Jquery

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 class="Single">24</span>
Tags:

2

Answers


  1. 0

    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 class="Single">30000</span>
    Login or Signup to reply.
  2. 0

    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 class="Single">24</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search