Estoy tratando de hacer que una determinada sección de mi sitio web anime un conteo ascendente. Sin embargo, cuando cargo el sitio web no se ejecuta nada y permanece en "0". Tengo jQuery al comienzo de mi secuencia de comandos HTML en la sección principal <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>¿Por qué no está contando?
Ha establecido el atributo de class dos veces en su etiqueta h4 . Por eso no funciona. Compruebe este ejemplo de trabajo aquí.
$('.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>El problema se debe a su código HTML. esta línea:
<h4 class="txt-primary fs40 mb-0" class="counter" data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>Ha establecido el atributo de clase dos veces, aquí está el problema, puede cambiar su etiqueta h4 de esta manera y funcionará:
<h4 class="txt-primary fs40 mb-0 counter" data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>