Réalisation d'un compteur avec JQuery

Bonjour à tous,

Voila mon problème qui dure depuis plusieurs jours et je n'arrive pas à le résoudre.

Je souhaite réaliser un compteur avec Javascript en utilisant JQuery pour la gestion des animation.

J'utilise une div de hauteur 22px qui affiche en background une image qui contient tous les chiffres de 0-9. Le but étant d'afficher 0, puis de faire descendre le background pour afficher 1, etc...

Voici le déroulement :

- Au chargement de la page timerReveil(); lance la fonction timerReveil().
- Celle-ci utilise un setTimeout qui temporise puis appelle la fonction Reveil().
- Cette dernière vérifie quel numéro est afficher grâce à une petite variable pos_chiffre1.
- Elle agit ensuite sur le comportement du background-position
- A la fin du traitement timerReveil() est rappelé pour relancer la temporisation puis retraiter une nouvelle fois Reveil(), etc...

Ma fonction timerReveil() qui utilise un setTimeout fait n'importe quoi mais je ne suis pas sur que l'erreur vienne uniquement de ça.

Les chiffres défilent à toutes vitesse puis font planter le navigateur.

DONC ATTENTION !

Voila mon code :

var pos_chiffre1=0;

function Reveil(){
$(function(){
if(pos_chiffre1==1){
$('.chiffre1').animate({backgroundPosition:'0 -22px'},100,"linear");
timerReveil();
}
if(pos_chiffre1==2){
$('.chiffre1').animate({backgroundPosition:'0 -66px'},100,"linear");
timerReveil();
}
if(pos_chiffre1==3){
$('.chiffre1').animate({backgroundPosition:'0 -88px'},100,"linear");
timerReveil();
}
if(pos_chiffre1==4){
$('.chiffre1').animate({backgroundPosition:'0 -110px'},100,"linear");
timerReveil();
}
if(pos_chiffre1==5){
$('.chiffre1').animate({backgroundPosition:'0 -132px'},100,"linear");
timerReveil();
}
if(pos_chiffre1==6){
$('.chiffre1').animate({backgroundPosition:'0 -154px'},100,"linear");
timerReveil();
}
if(pos_chiffre1==7){
$('.chiffre1').animate({backgroundPosition:'0 -176px'},100,"linear");
timerReveil();
}
if(pos_chiffre1==8){
$('.chiffre1').animate({backgroundPosition:'0 -198px'},100,"linear");
timerReveil();
}
if(pos_chiffre1==9){
$('.chiffre1').css({backgroundPosition:'0 0'},100,"linear");
pos_chiffre1=0;
timerReveil();
}
});
}

function timerReveil(){
pos_chiffre1++;
setTimeout("Reveil()", 1000);
}

timerReveil();



Merci pour votre aide.