Faire apparaître les ronds de couleurs les uns après les autres

**Heycava** · 04/02/2014, 16h13

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.

**SpaceFrog** · 04/02/2014, 16h18

incrémentes le fadeIn ...

Code :

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

.fadeIn(i*500)

ou lance la fonction avec l'indexe dans le call back
http://jsfiddle.net/YUMhB/

accessoirement le choix du span n'est pas très judicieux car il faut le passer en display inline-block ou block ...
http://jsfiddle.net/YUMhB/1/

**Heycava** · 04/02/2014, 16h32

Ça marche !
Merci beaucoup !

Du coup je mets la fonction en réponse :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var nb_cat;
nb_cat = jQuery(".cat").length;
 
for (var i = 1 ; i <= nb_cat ; i = i+1) {
	jQuery('.cat').eq(i).fadeIn(i*500).css('display', 'inline-block').queue(function() {
		jQuery('.cat').eq(i+1).fadeIn(500).css('display', 'inline-block');
		jQuery(this).eq(i).dequeue();
	});
};

J'ai aussi fait partir le i à 1 du coup pour que le premier rond n'apparaisse pas tout de suite (sinon on a fadeIn(0*500=0) en mettant la condition <= au lieu de <.

**SpaceFrog** · 04/02/2014, 16h34

rejette un oeil sur le post précédent ...

la seconde solution est tout de même plus classe ...

**Heycava** · 04/02/2014, 16h38

Oui c'est ce que je regardais. Effectivement, elle a l'air plus simple encore !
Je vais l'étudier ce soir en rentrant du boulot ^^ (je ne devrais pas être ici :p)

Faire apparaître les ronds de couleurs les uns après les autres

jQuery

Discussions similaires

Partager

Partager