Bonjour à tous !

Je me présente, je suis complètement débutant en jQuery. Je trouve ses fonctionnalités formidables mais pas toujours évidentes lorsque l'on est ambitieux ^^

Cela fait une journée que je sèche complètement sur une problématique de boucle.
J'ai beaucoup cherché sur de multiples sites web et forums, français comme anglais, mais sans succès.

Voici d'abord mon code HTML :
Code html : 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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="script.js"></script>	
</head>
 
<body>
<div>
<span class="cat"></span>
<span class="cat"></span>
<span class="cat"></span>
<span class="cat"></span>
<span class="cat"></span>
<span class="cat"></span>
<span class="cat"></span>
</div>
</body>
</html>

Et mon code CSS :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
* {
	margin: 0;padding:0;
}
body {
	padding:30px;
}
.cat {
	display:none; /* provisoire en attendant le JS */
	width:20px;
	height:20px;
	border-radius:10px;
	background-color:lightblue;
}

En supposant que les spans ".cat" sont en "display: inline-block", ce code génère donc sept ronds de couleurs à la suite.

L'idée est de faire apparaître les ronds de couleurs les uns après les autres.

J'ai d'abord trouvé cette méthode sur le net, qui utilise "queue" :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
$("#monDiv").fadeOut('slow').queue(function() {
     $("#monDeuxiemeDiv").fadeIn('slow');
     $(this).dequeue();
  });
En l'adaptant, on obtient donc :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
jQuery('.cat').eq(0).fadeIn(500).css('display', 'inline-block').queue(function() {
	jQuery('.cat').eq(1).fadeIn(500).css('display', 'inline-block');
	jQuery(this).dequeue();
});
J'utilise alors ".eq" pour connaître pour la position du span parmi tous. Ce code marche.
Sauf que ce code fonctionne pour les deux premiers spans (.cat). Alors en imbriquant davantage cette fonction, cela marche aussi, sauf que dans le vrai code, je n'ai pas sept ronds mais une cinquantaine ! Je suis sûr qu'une optimisation est possible.

C'est pour ça que j'ai pensé à une boucle. Voici donc mon idée :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
var nb_cat;
nb_cat = jQuery(".cat").length;
 
for (var i = 0 ; i < nb_cat ; i = i+1) {
	jQuery('.cat').eq(i).fadeIn(500).css('display', 'inline-block').queue(function() {
		jQuery('.cat').eq(i+1).fadeIn(500).css('display', 'inline-block');
		jQuery(this).eq(i).dequeue();
	});
Malheureusement, cela ne marche pas, les sept ronds apparaissent en même temps.
J'ai essayé de remplacer le "queue" par un callback, sans succès. J'ai essayé la boucle "each" (qui m'a semblé moins appropriée), sans succès. J'ai essayé les différentes sous-fonctions de queue (clearQueue, etc.), sans succès. Et j'en passe. Voilà pourquoi je demande de l'aide :-)

J'espère que mes explications n'ont pas trop manqué de clarté et que ma question est posée dans les normes du forum !

Merci d'avance,
HCV.