I am trying to make a certain section of my website animate a count up. However, when I load the website nothing runs and it remains at "0". I have jQuery at the start of my HTML script in the head section <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 8000,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="col-md-4 showinmbl">
<h4 class="txt-primary fs40 mb-0" class="counter" data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>
<p class="fs30 weight500" style="font-family: 'Inter', sans-serif; font-weight: 600;">Wins</p>
</div>Why isn't it counting?
You have set class attribute twice in your h4 tag. That's why it's not working. Check this working example here.
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 8000,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="col-md-4 showinmbl">
<h4 class="txt-primary fs40 mb-0 counter" data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>
<p class="fs30 weight500" style="font-family: 'Inter', sans-serif; font-weight: 600;">Wins</p>
</div>The problem is because of your HTML code. this line:
<h4 class="txt-primary fs40 mb-0" class="counter" data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>
You have set class attribute twice, here is the problem, you can change your h4 tag like this and it will work:
<h4 class="txt-primary fs40 mb-0 counter" data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>