Faire des fadeIn() en boucle dans un for() [Résolu]

[Nightswords]

Bonjour,

Je cherche à réaliser la création successive de paragraphes qui s'affichent les uns après les autres avec l'effet fadeIn(). Voici le javascript :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
var id = 1;
 
function Draw(){
 
	for(i=1;i<=20;i++)
	{
		$("body").append("<p id='"+id+"' style='display:none;'>Hello</p>");
		$("#"+id+"").fadeIn(1000);
		id++;
 
	}
}

Avec un

Code :

onload="Draw()"

sur la balise body pour lancer le script.

Problèmes : Le navigateur affiche un fadeIn() de tous les paragraphes d'un coup, et non pas les uns après les autres.

Quelqu'un aurait-il une idée pour m'aider ?

Merci d'avance !

[gwinyam]

Certainement lié au fait que tu ne fais pas réellement le fadeIn durant la boucle. L'appel à la méthode ne fais que déclencher l'action, l'instruction suivante est déjà interprétée que ton fadeIn n'est pas terminé.
Peut-être qu'avec un timer pour ralentir la boucle for() après l'instruction fadeIn() t'aiderait à avoir l'effet désiré.

Si ce n'est pas ça, regarde du côté de la pile d'appels. Mais je n'y crois pas trop.

[scourjean]

Tu peux utiliser le deuxième argument callback de fadeIn :

Code :

1
2
3
4
5
6
7
8
9
10
11
function Draw(num)
{
	if (num<=20)
	{
		$("body").append("<p id='"+num+"' style='display:none;'>Hello</p>");
		$("#"+num+"").fadeIn(1000, function() {
			// Animation complete
			Draw(num+1);
		});
	}
}

et appeler lors de onLoad :

Code :

Draw(1);

[gwinyam]

Bien vu la petite solution récursive et terminale avec ça.

[SpaceFrog]

spa bien les id numériques, ni commençant pas du numérique !

Code :

id='"+num+"'

mieux vaut

Code :

id='_"+num+"'

[Nightswords]

Merci d'avoir répondu aussi vite.

C'est exactement le problème auquel je pensais. Le fadeIn est juste déclenché mais le javascript passe directement à la suite du for sans traité le fadeIn. (Javascript n'est pas multitâche il me semble.)

Ceci dit j'ai essayé aussi avec les méthodes suivantes :

après le for():

Code :

1
2
3
$.each( "body", function(){
    $("p").fadeIn(1000);
});

Code :

1
2
3
$("body").each(function(){
    $("p").fadeIn(1000);
});

Même effet. Là aussi l'exécution du code est trop rapide pour que l'affichage se fasse ?

Je me penche sur un timer dans ma boucle for() pour essayer.

Merci encore

[Nightswords]

Ca marche !!

Merci scourjean ta solution est superbe !

J'avais déjà pensé à utiliser le callback de fadeIn() mais je ne savait pas comment l'utiliser. J'avais essayer en mettant un return(); dans la fonction callback mais même effet que les autres solutions.

Le fait de boucler en revenant à la fonction parent et faire la récurrence avec un if(), c'est parfait.

Merci beaucoup pour votre aide, très rapide !

[gwinyam]

Envoyé par SpaceFrog

spa bien les id numériques, ni commençant pas du numérique !

Code :

id='"+num+"'

mieux vaut

Code :

id='_"+num+"'

D'autant plus qu'avec un sélecteur CSS, ça ne marchera pas. En tout cas, d'après mon expérience, un sélecteur CSS sur un id qui démarre par un numérique, ça marche pas des masses.