jQuery animation compteur de nombre de zéro à la valeur
J'ai créé un script pour animer un certain nombre de zéro à sa valeur.
De travail
jQuery
JS:
$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
}
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>
Pas De Travail
Je veux maintenant exécuter le script plusieurs fois sur la page pour chaque correspondance de classe.
Ci-dessous est ce que j'essaie, 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));
}
});
});
- Vérifiez ce simple exemple pour Jquery Animation Compteur de Nombre De Zéro À la Valeur d'Animations Javascript
Vous devez vous connecter pour publier un commentaire.
Votre
this
ne fait pas référence à l'élément dans l'étape de rappel, au contraire, vous voulez le garder en référence au début de votre fonction (enveloppé dans$this
dans mon exemple):Mise à jour: Si vous souhaitez afficher des nombres décimaux, puis, au lieu de l'arrondissement de la valeur avec
Math.ceil
vous pouvez arrondi à 2 décimales par exemple avecvalue.toFixed(2)
:100.50
montre que101
, essayé d'utiliser @ashicus et @floribon code mais il ne fonctionne pas, toutes les idées? Merci à l'avance!this
l'intérieur de l'étape de rappel n'est pas l'élément, mais l'objet passé en animate()Une autre façon de faire et de garder les références à
this
seraitVIOLON
IMPORTANT: Il semble comme une petite différence, mais vous devriez vraiment utiliser un attribut de données pour contenir le nombre d'origine à compter jusqu'à. Modifier le numéro d'origine peut avoir onu-prévu les conséquences. Par exemple, je vais avoir cette animation permet d'exécuter à chaque fois un élément entre dans l'écran. Mais si l'élément qui entre, sort, puis entre à l'écran une seconde fois avant la première animation est terminée, il comptera jusqu'à un mauvais numéro.
HTML:
JQuery:
Ce que fait le code, c'est que le nombre de 8000 est à compter à partir de 0 à 8000. Le problème, c'est qu'elle est placée au milieu d'une très longue page, et une fois à l'utilisateur de faire défiler vers le bas et de voir le nombre, l'animation est déjà dîner. Je voudrais déclencher le compteur, une fois qu'il apparaît dans la fenêtre d'affichage.
JS:
Et HTML:
Vous pouvez obtenir de l'élément lui-même dans
.each()
, essayez ceci à la place de l'aidethis
Voici ma solution
et il travaille également, lors de l'élément affiche dans la fenêtre d'affichage
Vous pouvez voir le code en action en cliquant sur jfiddle
Ce travail est pour moi
C'est un travail pour moi !
Cela a fonctionné pour moi
CODE HTML
jQuery Code
Vous pouvez le faire avec la fonction animate de jQuery.
Article complet:
http://www.mishelshaji.co.in/howto/animated-number-counter-using-jquery/