javascript - objects - jquery selector

jQuery contador de número animado de cero a valor

Question

He creado un script para animar un número desde cero hasta su valor.

Trabajando

jQuery

$({ Counter: 0 }).animate({
  Counter: $(''.Single'').text()
}, {
  duration: 1000,
  easing: ''swing'',
  step: function() {
    $(''.Single'').text(Math.ceil(this.Counter));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>

No funciona

Ahora quiero ejecutar el script varias veces en la página para cada clase coincidente.

A continuación se muestra lo que estoy intentando pero sin éxito hasta ahora:

HTML

<span class="Count">200</span>
<span class="Count">55</span>

JQUERY

$(''.Count'').each(function () {
  jQuery({ Counter: 0 }).animate({ Counter: $(this).text() }, {
    duration: 1000,
    easing: ''swing'',
    step: function () {
      $(this).text(Math.ceil(this.Counter));
    }
  });
});

Answer 1

¡Esto es trabajo para mí!

<script type="text/javascript">
$(document).ready(function(){
        countnumber(0,40,"stat1",50);
        function countnumber(start,end,idtarget,duration){
            cc=setInterval(function(){
                if(start==end)
                {
                    $("#"+idtarget).html(start);
                    clearInterval(cc);
                }
                else
                {
                   $("#"+idtarget).html(start);
                   start++;
                }
            },duration);
        }
    });
</script>
<span id="span1"></span>

Answer 2

Esto es trabajo para mí

$(''.Count'').each(function () {
    $(this).prop(''Counter'',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: ''swing'',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

Answer 3

Esto funciono para mi

CÓDIGO HTML

<span class="number-count">841</span>

jQuery Code

$(''.number-count'').each(function () {
    $(this).prop(''Counter'',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: ''swing'',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });

Answer 4

Lo que hace el código es que el número 8000 está haciendo una cuenta ascendente de 0 a 8000. El problema es que se coloca en el medio de una página bastante larga, y una vez que el usuario se desplaza hacia abajo y ve el número, la animación ya está en el menú. . Me gustaría activar el contador, una vez que aparece en la ventana gráfica.

JS:

$(''.count'').each(function () {
                $(this).prop(''Counter'',0).animate({
                        Counter: $(this).text()
                }, {
                        duration: 4000,
                        easing: ''swing'',
                        step: function (now) {
                                $(this).text(Math.ceil(now));
                        }
                });
            });

Y HTML:

 <span class="count">8000</span>

Answer 5

Puedes hacerlo con la función animar en jQuery.

$({ countNum: $(''.code'').html() }).animate({ countNum: 4000 }, {
    duration: 8000,
    easing: ''linear'',
    step: function () {
        $(''.yourelement'').html(Math.floor(this.countNum));
    },
    complete: function () {
        $(''.code'').html(this.countNum);
        //alert(''finished'');
   }
});

Articulo completo:

http://mishelshaji.co.in/2018/animated-number-counter-using-jquery/

Answer 6

Puedes obtener el elemento en .each() , prueba esto en lugar de usar this

$(''.Count'').each(function (index, value) {
    jQuery({ Counter: 0 }).animate({ Counter: value.text() }, {
        duration: 1000,
        easing: ''swing'',
        step: function () {
            value.text(Math.ceil(this.Counter));
        }
    });
});

Answer 7

Tu this no se refiere al elemento en la devolución de llamada de paso, en lugar de eso, quieres mantener una referencia al principio de tu función (incluida en $this en mi ejemplo):

$(''.Count'').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 1000,
    easing: ''swing'',
    step: function () {
      $this.text(Math.ceil(this.Counter));
    }
  });
});

Actualización : si desea mostrar números decimales, en lugar de redondear el valor con Math.ceil , puede redondear hasta 2 decimales, por ejemplo, con value.toFixed(2) :

step: function () {
  $this.text(this.Counter.toFixed(2));
}

Answer 8

this dentro del paso de devolución de llamada no es el elemento sino el objeto pasado a animate ()

$(''.Count'').each(function (_, self) {
    jQuery({
        Counter: 0
    }).animate({
        Counter: $(self).text()
    }, {
        duration: 1000,
        easing: ''swing'',
        step: function () {
            $(self).text(Math.ceil(this.Counter));
        }
    });
});

Otra forma de hacer esto y mantener las referencias a this sería

$(''.Count'').each(function () {
    $(this).prop(''Counter'',0).animate({
        Counter: $(this).text()
    }, {
        duration: 1000,
        easing: ''swing'',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

FIDDLE

Answer 9

IMPORTANTE : parece una pequeña diferencia, pero realmente debería usar un atributo de datos para mantener el número original para contar hasta. Alterar el número original puede tener consecuencias no deseadas. Por ejemplo, esta animación se ejecuta cada vez que un elemento entra en la pantalla. Pero si el elemento ingresa, sale y luego ingresa a la pantalla una segunda vez antes de que finalice la primera animación, contará hasta el número equivocado.

HTML:

<p class="count" data-value="200" >200</p>
<p class="count" data-value="70" >70</p>
<p class="count" data-value="32" >32</p>

JQuery:

$(''.count'').each(function () {
    $(this).prop(''Counter'', 0).animate({
            Counter: $(this).data(''value'')
        }, {
        duration: 1000,
        easing: ''swing'',
        step: function (now) {                      
            $(this).text(this.Counter.toFixed(2));
        }
    });
});