Animer plusieurs compteurs

Version imprimable

28/11/2017, 10h50
SylvainM

Animer plusieurs compteurs

Bonjour à tous,

En m'inspirant de ce Fiddle (http://jsfiddle.net/350D/ckeo5v2b/), je tente de créer une page avec des compteurs animés : http://jsfiddle.net/hgdfcb1b/1/
Malheureusement, mon tout petit niveau en JS / HTML / CSS :oops: ne me permet pas de trouver comment faire en sorte que l'ensemble de mes compteurs (classe .compteur) soient animés avec des variables différentes (selon #id).
Je suis sûr que c'est tout bête, et votre aide me fera progresse à grands pas ! :D

Merci d'avance pour votre aide !

Sylvain M.
28/11/2017, 11h46
mathieu

vous pouvez faire cela avec avec plusieurs appels à "animate"
http://jsfiddle.net/hgdfcb1b/2/

dans ce code j'ai juste fait un copier / coller mais si vous avez plus de compteurs, le code sera plus clair en utilisant une boucle.
28/11/2017, 12h18
SylvainM

Merci beaucoup Mathieu,
C'est déjà SUPER ! 8-) Mais effectivement, j'ai pas mal de compteurs, et j'aimerais bien trouver une méthode pour animer l'ensemble des compteurs de la page (même paramètres / durée)
Je ne suis malheureusement pas capable de créer cette boucle seule (mais je vais chercher quand même !). Si tu as des conseils, idées :oops:

voilà un exemple avec au début la liste des différents compteurs et ensuite la boucle qui construit l'affichage et qui lance l'animation

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    var listeCompteurs = [
        {
            "libelle" : "Observations",
            "nombre" : 35694,
        },
        {
            "libelle" : "Espèces",
            "nombre" : 2552,
        },
    ];
 
 
    for (var i in listeCompteurs) {
 
        var compteur = listeCompteurs[i];
 
 
        // affichage
 
        var afficheNombre = $("<span/>");
 
        $("body").append(
            $("<div/>")
                .append(compteur["libelle"] + "*: ")
                .append(afficheNombre)
        );
 
 
        // animation
 
        afficheNombre.animate({
            "nombre" : compteur["nombre"],
        }, {
            duration: 1000 + compteur["nombre"] / 30,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            },
        });
 
    }

29/11/2017, 18h15
SylvainM

Super, je suis tout prêt du but !!! :D
Sauf que là, les compteurs sont ajouté au <body>, alors que j'aimerais qu'ils soient ajoutées à des cellules (<td> ou <div>) de ma page, identifiées par leur ID (et chaque compteur avec un ID différent).
J'ai mis à jour le JsFiddle avec ton code, et j'ai ajouté un début de modification, mais je ne sais comment poursuivre :
http://jsfiddle.net/hgdfcb1b/3/
Est-ce que c'est "possible" ? (je me doute que la réponse est "oui", mais est-ce que c'est trop te demander de m'aider à finaliser cette fonctionnalité :oops:)

Merci encore !!!

Sylvain M.
29/11/2017, 22h49
mathieu

le code qui ajoute les balises est $("body").append(...
donc pour ajouter des éléments à un autre endroit, il suffit de modifier cela.

dans la documentation se trouve des exemples des différentes façons d'utiliser "append"
http://api.jquery.com/append/
30/11/2017, 00h08
SylvainM

Super : tes précisions m'ont permis de mieux comprendre 8-)
Ça marche : http://jsfiddle.net/hgdfcb1b/4/
N'hésite pas à me dire si tu vois des erreurs ou des optimisations possibles !
Un grand MERCI !!! :D
30/11/2017, 10h14
SylvainM

Salut !

Je laisse le sujet "Résolu", mais je me permet cette question "bonus" :aie:
Avant que je n'envisage d'animer mes compteurs avec cette fonction, les nombres affichés étaient formatés avec

Code:

Intl.NumberFormat().format(nombre) ;

Mais maintenant, avec cette animation, je dois avouer que je ne sais pas du tout où/comment intégrer le formatage des nombres.

Je vois que .append(Intl.NumberFormat().format(nombre)) fonctionne, mais si je le place dans la fonction .animate, ça ne fonctionne plus... :?

Mes essais sur ce JsFiddle : http://jsfiddle.net/hgdfcb1b/5/

Merci encore !
30/11/2017, 12h15
mathieu

Citation:

Envoyé par SylvainM

Mes essais sur ce JsFiddle : http://jsfiddle.net/hgdfcb1b/5/

je ne vois pas dans ce code où vous utilisez le formatage dans "animate"
30/11/2017, 12h23
SylvainM

Citation:

Envoyé par mathieu

je ne vois pas dans ce code où vous utilisez le formatage dans "animate"

C'est bien mon problème : je ne sais pas où placer le code de formatage dans "animate".
J'ai juste mis le code de formatage dans la partie "// tests avec la fonction Intl.NumberFormat().format()", pour montrer le formatage attendu dans la page.
Mais dès que j'essaie d'intégrer cela dans la fonction animate, ça ne fonctionne plus...
30/11/2017, 13h51
mathieu

Citation:

Envoyé par SylvainM

Mais dès que j'essaie d'intégrer cela dans la fonction animate, ça ne fonctionne plus...

c'est ça que j'aimerai voir, le code qui ne fonctionne pas.
30/11/2017, 14h29
SylvainM

Ok.

Alors, par exemple, ici je tente dès le début dans l'array "listeCompteurs" :
http://jsfiddle.net/hgdfcb1b/6/
Mais de ce fait, les nombres deviennent du texte, et forcément l'animation ne marche plus...

Dans celui-ci (http://jsfiddle.net/hgdfcb1b/7/) je tente au niveau de la fonction afficheNombre.animate(), mais le problème est le même...

J'ai comme l'impression que la solution est ici (par exemple) : https://stackoverflow.com/questions/...jquery-counter
Mais je ne sais pas la mettre en place dans mon contexte... :oops:
30/11/2017, 15h06
mathieu

à chaque changement de valeur, c'est la fonction dans "step" qui est appelée donc c'est à cet endroit qu'il faut mettre le formatage du résultat :
http://jsfiddle.net/hgdfcb1b/8/
30/11/2017, 15h33
SylvainM

C'est si simple quand on lit ton explication :oops:
MERCI !!!
Dommage qu'on ne puisse mettre qu'un seul pouce aux messages pour remercier. J'en rajoute ici : :ccool: :plusser: :king: