Jquery: Use a counter to show a discount

Question

I have two prices listed in HTML. One is the grand total price and the other price is the discount price (The discount price is the grand total with the discount applied to it):

 <ul>
<li class="discounted-price">180.99</li>
<li class="special">Grand Total: £<b id="price">186.95</b></li>
</ul>

<a class="trigger" href="#">Link</a>

When users click on the link, I want digits of the Grand total price to 'scroll down' (e.g. like a cash register) to the value of the discounted price.

I found this example of how to achieve it using Jquery. However, in the example, their example is not a price and so has many digits separated by a comma.

I've tried to stip out all the unnecessary code, but now my price looks like this: £180.99008006406564

How can I limit my price to just two decimal places. I know Javascript has a tofixed() tool which is used to control decimal places, but I can't seem to get it to work in my code without breaking the animation.

Here is my code:

$(document).ready(function () {

    // Animate the element's value from x to y:
    $('.trigger').live('click', function () {
        var originalprice = $('#price').text();
        var discount = $('.discounted-price').text();

        $({
            someValue: originalprice
        }).animate({
            someValue: discount
        }, {
            duration: 3000,
            easing: 'swing',
            // can be anything
            step: function () {
                $('#price').text(this.someValue);
            }
        });

    });
});

HERE IS JSFIDDLE

Answer 1

I'd do something like this :

jQuery(function($) {
    $(document).on('click', '.trigger', function () {
        var originalprice = parseFloat($('#price').text()),
            discount      = parseFloat($('.discounted-price').text());

        $({someValue: originalprice})
            .animate({
                someValue: discount
            }, {
                duration: 3000,
                easing: 'swing',
                step: function (now) {
                    $('#price').text( parseInt((now * 100),10) / 100);
                }
        });
    });
});

FIDDLE

Answer 2

Use this approach in step callback:

$('#price').text(parseFloat(this.someValue).toFixed(2));

jsFiddle