We Keep Coding

jquery Counter is not starting from 0 to the target number

Trying to create counter which starts from 0 and go up to target value. I tried to Use setInterval but it didn't work, As I do not have much clear idea of it I have referred certain tutorial also still not able to work my code. If someone can help me by correcting my code would be great for me.
Thank You In Advance.
$(document).ready(function() {
$('.tts-counter .tts-counter-item .tts-number').each(function() {
var counterValue = $(this).data('counter');
var finalValue = 0;
for (var i = 0; i <= counterValue; i++) {
$(this).text(finalValue);
finalValue++;
}
});
});

After checking and referring to many articles related to counters I found this solution.
$('.tts-number').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});

jQuery/JS number counting animation from zero to value

I have built a web-app in which the HTML code receives an integer value from python. I want to add a counting from 0 to that number animation.
I have checked many such queries on StackOverflow like this link.
Today morning the animation was working fine, but now it's not working.
$('.count').each(function ()
{
$(this).prop('Counter',0).animate
({
Counter: $(this).text()
},
{
duration: 10000,
easing: 'swing',
step: function (now)
{
$(this).text(Math.ceil(now));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="font-weight-bold" style="color:#f92424"><span class="count">{{ confirmedIn }}</span></h4>
Maybe I am missing some library or something, idk
Can anyone help me with this issue?

Reviewing your code:
Since the there is no logic to dictate how the counter should change, i've added a countTo variable before the animation.
Since you reference { Counter: $(this).text() } as the properties object within the animate function, the $(this).text() begins as {{ confirmed }} which is not a parsable number, hence NaN.
The solution below should resolve this.
$('.count').each(function () {
let el = $(this);
let countTo = 1000;
el.prop('counter',0).animate({
counter: `+=${countTo}`
}, {
step: function (now) {
$(this).text(Math.ceil(now))
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="font-weight-bold" style="color:#f92424"><span class="count">{{ confirmedIn }}</span></h4>

jQuery animated number counter from zero to a certain number returned in a PHP function

I have created a script to animate a number from zero to a certain number obtained from a PHP file. But doesn't works.
This is my code:
JQUERY
(function($){
var auto_refresh = setInterval(
function (){
$("#tasksCompleted").load("https://workhub.atexto.com/main/tasksCompleted.php").fadeIn("slow");
},
3000); // refresh every 1000 milliseconds
jQuery({ Counter: 200000 }).animate({ Counter: $("#tasksCompleted").text() }, {
duration: 8000,
easing: "swing",
step: function () {
$("#tasksCompleted").text(Math.ceil(this.Counter));
}
});
})(jQuery);
HTML
<span id="tasksCompleted"></span>
Here is the demo (dont's work):
https://jsfiddle.net/rwf707Lp/

EDIT
I changed a coupled things from my first answer...
The trick, to show an "achievement counter" will be to count from zero to the number obtained via ajax on page load.
Then the interval to constantly check for an updated achievement has to check if the quite long onload animation had finished.
If not finished the initial counting... Just let it finish! And wait for the next inteval iteration.
Then... If the obtained number is different from the number "before ajax", count!
The speed now depends on the number form the ressource speed to increase.
I think that is closer to what you wish...
;)
(function($){
console.clear();
var number_beforeAjax;
var number_afterAjax;
var auto_refresh = setInterval(
function (){
number_beforeAjax = parseInt( $("#tasksCompleted").text().replace(",","") );
console.log("number_beforeAjax: "+number_beforeAjax);
$.ajax({
dataType: "jsonp",
url: "https://www.bessetteweb.com/SO/45614889/ressource.php",
success: function(data){
$("#numberFromAjax").html(data);
counter();
}
}); //$("#numberFromAjax").getJSON("https://www.bessetteweb.com/SO/45614889/ressource.php",counter());
},
3000); // refresh every 3000 milliseconds
// A separate function to call as a load callback
function counter(){
// Just to see what was loaded via ajax.
var loaded = $("#numberFromAjax").text();
console.log("loaded: "+loaded);
// Number loaded via ajax parsed as integer.
number_afterAjax = parseInt( $("#numberFromAjax").text().replace(",","") );
console.log("number_afterAjax: "+number_afterAjax);
// If the numbers before and after ajax are different
if(number_beforeAjax != number_afterAjax && !isNaN(number_afterAjax) ) {
counterSpeed = 5000;
// Faster if the difference isn't much
if(number_afterAjax-number_beforeAjax<20){
counterSpeed = 2900;
}
// Set the start number to zero on 1st iteration
var startNumber;
if(isNaN(number_beforeAjax)){
startNumber = 0;
}else{
startNumber = number_beforeAjax;
}
// Counter!
jQuery({ Counter: startNumber }).animate({ Counter: number_afterAjax }, {
duration: counterSpeed,
easing: "swing",
step: function () {
$("#tasksCompleted").text(Math.ceil(this.Counter).toLocaleString());
}
});
}
// Just a console.log
if(number_beforeAjax == number_afterAjax && !isNaN(number_afterAjax)){
console.log("Request revealed no change.")
}
}
})(jQuery);
#numberFromAjax{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="tasksCompleted"></span><br>
<span id="numberFromAjax"></span>
Got to wait 3 seconds for the first interval to start in this snippet...
When you'll see "Request revealed no change.", just wait a little for the ressource to increment.
EDIT
.toLocaleString() re-adds the coma on the number to be displayed.

Seems to work fine you just missed to import Jquery lib ,
see below snippet :
(function($){
var auto_refresh = setInterval(
function (){
$("#tasksCompleted").load("https://workhub.atexto.com/main/tasksCompleted.php").fadeIn("slow");
},
3000); // refresh every 1000 milliseconds
jQuery({ Counter: 200000 }).animate({ Counter: $("#tasksCompleted").text() }, {
duration: 8000,
easing: "swing",
step: function () {
$("#tasksCompleted").text(Math.ceil(this.Counter));
}
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="tasksCompleted"></span>

Animate Number and Text when reach a certain point in the HTML file

I want to count numbers with text when scrolling down my HTML file and reach a certain section. The code looks like this:
<h3 class="count">25 Years</h3>
<p>On the Road...</p>
<h3 class="count">143 Million</h3>
<p>Transactions worldwide 2015</p>
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
The problem is that I only get a correct result when I put in only a number. If I put in a string like 25 Years, it outputs NaN.
Any suggestions for my code?
var targetOffset = $(".company-numbers").offset().top;
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
(function () {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
return false;
}
});
});
})();
} else {
return false;
}
})

The issue is because your jQuery code expects the value to be able to be parsed to an integer. Try putting the values to be counted in their own elements, for example <span>, and then call the jQuery logic on those values.
<h3><span class="count">25</span> Years</h3>
<p>On the Road...</p>
<h3><span class="count">143</span> Million</h3>
<p>Transactions worldwide 2015</p>

Please check this code , do you really want it like this?
and let me know!!!
<h3 class="count">25 Years</h3>
<p>On the Road...</p>
<h3 class="count">143 Million</h3>
<p>Transactions worldwide 2015</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text().match(/\d/g).length
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
</script>
or if you want to count total number of characters then please change "counter" property.
Counter: $(this).html().length

You have to assign number values to elements if you want to operate like a create an array with key values inside your function or a JSON.

jQuery and Knob animate issue

I am trying to animate a number so that it rolls into the number when the page loads. I am using another library to display a dial (http://anthonyterrien.com/knob/). The issue I am having is that the number seems to be different every time I run it. It should be a consistent number ending on 19420. However sometimes it is lower and there doesn't seem to be any particular pattern.
My JS code looks like this:
$(function() {
$('#dial').knob({
min: '0',
max: '25000',
readOnly: true
});
$({
value: 0
}).animate({
value: 19420
}, {
duration: 950,
easing: 'swing',
step: function() {
$('#dial').val(Math.round(this.value)).trigger('change');
}
});
});
The fiddle can be found here: http://jsfiddle.net/ND5Sf/
What have I done wrong or is there anything I've missed out? If not, are these 2 libraries not compatible?

The issue is because you are using step function instead of progress.
Step:
A function to be called for each animated property of each animated
element. This function provides an opportunity to modify the Tween
object to change the value of the property before it is set.
Progress:
A function to be called after each step of the animation, only once
per animated element regardless of the number of animated properties.
(version added: 1.8)
Code:
$(function () {
$('#dial').knob({
min: '0',
max: '25000',
readOnly: true
});
$({
value: 0
}).animate({
value: 19420
}, {
duration: 950,
easing: 'swing',
progress: function () {
$('#dial').val(Math.round(this.value)).trigger('change');
}
});
});
Docs: http://api.jquery.com/animate/
Demo: http://jsfiddle.net/IrvinDominin/JW2gP/