Discussion :

[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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

id='"+num+"'

mieux vaut

Code :

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

id='_"+num+"'

[gwinyam]

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

Code :

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

id='"+num+"'

mieux vaut

Code :

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

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.

[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 :

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

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

Code :

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

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 !