How to animate number that is variable with jQuery

I would echo out the number from PHP into a span with an id attribute (if there is only one occurrence of it on the page) or in a class attribute. Then I would reference that or those spans on page load in jQuery to animate them. For example:

<!-- page code -->
<span class="animatedNumber">{{ $number }}</span>
<!-- page code -->

Then in your javascript:

$(document).ready(function () {
// your specific animation code here
//    $('span.animatedNumber').animate();
});

Is that what you were going for?

What do you mean by "animate number"?

Do you mean dynamically update the counts of the various moods without refreshing the page?

You'll need to do four things:

On the backend:

1. Implement an ajax controller that will accept an array of mood IDs, and respond with the current count for each ID

On the frontend:

1. Collect the IDs of all the moods on the page with javascript

2. Send an updated count request via AJAX

3. Update the value of all the moods based on the response from the AJAX request

I think that i miss put span before class, i will try it again, and let you know guys if this works!

I did it with this plugin https://github.com/bfintal/Counter-Up, it's really easy, but i had to put script code into main view, i didn't include any JS code for now. Numbers are now animated!

Or if you want to update this in real time you could take a look at the brand new tutorial about pusher