jQuery counter counting down after reaching the number

0 votes

I'm using a jQuery code for showing animated stats for my web page.

The number animates successfully, but a few seconds after reaching its max value it starts counting down back to 1! How can I fix this?

// Checks if any particular element is in viewport
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementTop < viewportBottom;
};

// Animate numbers when scrolled into view
$(window).scroll(function() {
  var counters_triggered = false;
  var $counter_animated = $('.stat-counters > .stat > .counter > span');

  if ($('.stat-counters').isInViewport() && !counters_triggered) {
    counters_triggered = true;

    $.each($counter_animated, function() {
      var $counter = $(this);
      $counter.prop('Counter', 0).animate({
        Counter: $counter.text()
      }, {
        duration: 5000,
        easing: 'swing',
        step: function(now) {
          $counter.text(Math.ceil(now));
        }
      });
    });
  }
});
.padding { height: 1000px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Scroll down...
<div class="padding"></div>
<div class="stat-counters d-flex justify-content-between align-items-start">
  <div class="stat col-md-4 px-0">
    <div class="counter">
      <span>10</span>+
    </div>
    <span class="text">Years of Experience</span>
  </div>
</div>
Jul 26 in Web Development by gaurav
• 17,580 points
13 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
0 answers
0 votes
0 answers

Add something after the "n" element using jQuery

For a markup like <div id="holder"> ...READ MORE

Jul 26 in Web Development by gaurav
• 17,580 points
11 views
0 votes
0 answers

Add something after the "n" element using jQuery

For a markup like <div id="holder"> ...READ MORE

Jul 27 in Web Development by gaurav
• 17,580 points
9 views
0 votes
1 answer
0 votes
1 answer

What is the difference between JavaScript and jQuery?

JavaScript is an independent language and can ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
28 views
0 votes
0 answers

How to add a link in Jquery PrettyPhoto to download the image

I am using Jquery PrettyPhoto to have ...READ MORE

Jun 29 in Web Development by gaurav
• 17,580 points
18 views
0 votes
1 answer

jQuery counter to count up to a target number

Use the jQuery animate function to count ...READ MORE

answered Jun 20 in JQuery by rajatha
• 7,040 points
13 views
0 votes
0 answers
0 votes
1 answer

How to use jquery with asp.net ajax?

If you weren't aware, Microsoft is planning ...READ MORE

answered Oct 15, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
190 views
0 votes
1 answer

Is 'sparkline' a method?

I suggest you to check 2 things That jquery.sparkline.js is actually ...READ MORE

answered Nov 9, 2018 in Apache Spark by Frankie
• 9,830 points
602 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP