Animation avec compteur

Bonjour,

Je souhaiterais appliquer une animation "compteur" sur 2 ID
Le Script1 me permet d'aller chercher une donnée1 dans une base externe et de l'afficher dans mon ID "demo1"
Le Script2 me permet d'aller chercher une donnée2 dans une base externe et de l'afficher dans mon ID "demo2"
Le Script3 me permet d'afficher ma donnée en l'animant sous forme de "compteur"

> comment afficher mes ID "demo1" et "demo2" en les animant sous forme de "compteur" ?
J'ai beau mettre la class="compteur" sur leur champ mais cela ne marche pas :-(

Merci pour votre aide !

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CHIFFRES CLES</title>
</head>
<body>
 
 
<table width="518"  border="1">
    <tr>
    <td width="335" style="text-align: center" ><p id="demo1"  style="color: #BC2E30;"></td>
    <td width="335" style="text-align: center" ><p id="demo2"  style="color: #BC2E30;"></td>
    <td width="167" style="text-align: center" class="compteur">100</td>
  </tr>
</table>
 
 
<!-----------------------SCRIPT 1----------------------------> 
<script>
 
// j'appelle mon fichier de data exerne	avec extension .json
  $.getJSON('chiffres_salaries.json', function(data) { 
 
// J'écris sur la page	
document.getElementById("demo1").innerHTML=data.datametier[23].total.toLocaleString();
 
  } );
 
 </script>
 
 <!-----------------------SCRIPT 2----------------------------> 
<script>
 
// j'appelle mon fichier de data exerne	avec extension .json
  $.getJSON('chiffres_salaries.json', function(data) { 
 
// J'écris sur la page	
document.getElementById("demo2").innerHTML=data.datametier[24].total.toLocaleString();
 
  } );
 
 </script>
 
<!-----------------------SCRIPT 3----------------------------> 
<script type="text/javascript">
$(".compteur").each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
</script>
 
 
</body>
</html>