Animer plusieurs compteurs

**SylvainM** · 28/11/2017, 10h50

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

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 !

Merci d'avance pour votre aide !

Sylvain M.

**mathieu** · 28/11/2017, 11h46

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.

**SylvainM** · 28/11/2017, 12h18

Merci beaucoup Mathieu,
C'est déjà SUPER !

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

**mathieu** · 28/11/2017, 23h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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));
            },
        });
 
    }

**SylvainM** · 29/11/2017, 18h15

Super, je suis tout prêt du but !!!

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é

)

Merci encore !!!

Sylvain M.

**mathieu** · 29/11/2017, 22h49

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/

Animer plusieurs compteurs

jQuery

Vue hybride

Discussions similaires

Partager

Partager