How to add number with animation

Question

I want to add number in existing number like stopwatch, My function is adding number perfectly but I want to add animation like stopwatch, I tried but I did not get any clue to get it done. Here's a working demo

$('a').click(function() {
    var val = parseInt($(this).text());
    var currentVal = parseInt($('#price').text())
    var cal = parseInt(val-currentVal)
    var club = parseInt($('#price').text()) + cal
    var bb = $('#price').text(club)
})
})

HTML

<a href="#">10000</a>
<a href="#">12000</a>
<a href="#">15000</a>
<div id="price">10000</div>

Can you define 'animation like a stopwatch'? Stopwatches I've seen don't have animation, the values just appear. — Rory McCrossan, Dec 24 '12 at 11:58
Like http://stackoverflow.com/questions/4424099/js-jquery-number-increasing-animation and http://stackoverflow.com/questions/5411343/how-to-animate-numbers-using-jquery ? — Alvin Wong, Dec 24 '12 at 11:59
@RoryMcCrossan: please see this http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript, you can see value being added — jchand, Dec 24 '12 at 12:00

score 1 · Answer 1 · edited May 23 '17 at 12:18

1

When you set .text, consider that you can apply JQuery animations here as strings of callbacks. For instance, something like this might work. Change the last line of the function to:

$('#price').fadeOut('fast', function() { this.text(club); this.fadeIn('fast');})

There's more information with a JSFiddle link to a working example here.

edited May 23 '17 at 12:18

Community

1
1

answered Dec 24 '12 at 11:59

Martin Foot

3,594
3
28
35

score 1 · Accepted Answer · answered Dec 24 '12 at 12:16

1

Use javascript function setInterval to do animation of your choice.
view jsfiddle
have a look about setInterval on javascript animation for beginner to advance javascript animation without using any framework.

answered Dec 24 '12 at 12:16

vusan

5,221
4
46
81

How to add number with animation

2 Answers2