How di I a incerement counter

Question

1.00/5 (3 votes)

See more:

I write some code that works but not completely true.
that is my code:
It increment but at the end also decrement and then increment not up to my wish.
I want every time it hover its become increment.

What I have tried:

<div id="shiva"><span class="count">200</span></div>
<div id="shiva"><span class="count">1000</span></div>
<div id="shiva"><span class="count">853</span></div>
<div id="shiva"><span class="count">154</span></div>
<div id="shiva"><span class="count">10</span></div>
<div id="shiva"><span class="count">87</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">1421</span></div>
<div id="talkbubble"><span class="count">145</span></div>
<div id="talkbubble"><span class="count">78</span></div>
<br />
<br />
<a class="linker" href="http://www.i-visionblog.com/2014/11/jquery-animated-number-counter-from-zero-to-value-jquery-animation.html"  target="_blank">visit Tutorial in Blog</a>
<br />

CSS

#shiva
{
  width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  float:left;
  margin:5px;
}
.count
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
  float:left;
  margin:20px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

.linker
{
  font-size : 20px;
  font-color: black;
}

JS

 $(document).ready(function(){
        $('#shiva').on('mouseover', function(){$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {   
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
          
});});});

Posted 17-Aug-17 1:46am

Member 13365366

Updated 17-Aug-17 2:16am

Add a Solution

Comments

ZurdoDev 17-Aug-17 8:08am

Debug your code and find out what is going on.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thomas Daniels · Answer 1 · 2017-08-17T02:16:00

Firstly, an 'id' is supposed to be unique - that's not the case here. I don't know if the purpose is to let them all at once increment on hover, but if it is, you better give them a class 'shiva' and 'talkbubble' and change your JavaScript and CSS accordingly.

Now to your actual problem: the reason why it decrements at the end.

You have this line:

Counter: $(this).text()

You're telling to count to the current text value. But what if you hover over the element while the text is not 200? Then after the first counter, you'll start another counter that simply counts back. That's not what you want. So you can set a data-max attribute on every counter span that contains the value to count to:

HTML

<div id="shiva"><span class="count" data-max="200">200</span></div>

And then, rather from using .text() to get the value to count to, use .data('max').

That's not all though - when I tried this out, it would only count up once, and not on all hovers. To resolve that, you can tell to animate { Counter: 0 } to 200 rather than a jQuery element after setting a property. Note that, if you do this, you can't use $(this).text anymore, so you have to set a variable like var counterSpan before to replace your $(this).

Additionally, you want mouseenter instead of mouseover, so you don't get tons of events when a mouse stays on the element.

Lastly, following the above steps will cause the counter to re-start when you leave and enter for a second time. That doesn't sound desirable. So at the start of the animation, you can set .prop("animating", true) and before that, check if .prop("animating") is true: if it is, you don't want to animate because an animation is already going on. When the animation is complete, you want to set the "animating" prop to false again so you can animate for a second time.

All of this combined, you get this code:

JavaScript

$(document).ready(function() {
  $('#shiva').on('mouseenter', function() {
    $('.count').each(function() {
      var counterSpan = $(this);
      if (counterSpan.prop('animating')) {
        return;
      }
      counterSpan.prop('animating', true);
      $({
        Counter: 0
      }).animate({
        Counter: $(this).data('max')
      }, {
        duration: 4000,
        easing: 'swing',
        step: function(now) {
          counterSpan.text(Math.ceil(now));
        },
        complete: function() {
          counterSpan.prop('animating', false);
        }
      });
    });
  });
});

Live demo: on JSFiddle[^]