web-dev-qa-db-fra.com

Compteur de nombre animé jQuery de zéro à valeur

J'ai créé un script pour animer un nombre de zéro à sa valeur.

Travail

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>

Ne fonctionne pas

Je souhaite maintenant exécuter le script plusieurs fois sur la page pour chaque classe correspondante.

Voici ce que j'essaye mais sans succès jusqu'à présent:

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));
    }
  });
});
javascriptjqueryhtmlanimationeach
34
DreamTeK

Votre this ne fait pas référence à l'élément dans le rappel de l'étape, mais vous souhaitez conserver une référence au début de votre fonction (entouré de $this Dans mon exemple):

$('.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));
    }
  });
});

Mise à jour: Si vous souhaitez afficher des nombres décimaux, alors, au lieu d’arrondir la valeur avec Math.ceil, Vous pouvez arrondir à 2 décimales, par exemple avec value.toFixed(2):

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

this dans le rappel de l'étape n'est pas l'élément mais l'objet transmis à animate ()

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

Une autre façon de faire cela et de garder les références à this serait:

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

[~ # ~] violon [~ # ~]

17
adeneo

IMPORTANT : Cela semble être une petite différence, mais vous devriez vraiment utiliser un attribut de données pour contenir le nombre original. La modification du numéro d'origine peut avoir des conséquences imprévues. Par exemple, je fais exécuter cette animation à chaque fois qu'un élément entre à l'écran. Mais si l'élément entre, quitte, puis entre à l'écran une seconde fois avant la fin de la première animation, le nombre obtenu est incorrect.

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));
        }
    });
});
5
Tyler Kemme

Le code fait que le nombre 8000 compte de 0 à 8 000. Le problème est qu’il est placé au milieu d’une page assez longue et que, une fois que l’utilisateur a fait défiler la liste et l’a vu, l’animation est déjà terminée. . Je voudrais déclencher le compteur, une fois qu'il apparaît dans la fenêtre.

JS:

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

Et HTML:

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

Vous pouvez obtenir l'élément lui-même dans .each(), essayez ceci au lieu d'utiliser 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));
        }
    });
});
1
Starscream1984

C'est un travail pour moi!

<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>
0
Taufiq Shamad

Cela a fonctionné pour moi

CODE HTML

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

code jQuery

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

Cela fonctionne pour moi

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