Bonjour,

j'ai réalisé un petit slideshow pour interchanger automatiquement une image dans une div, seulement j'ai un petit soucis visuel au changement de l'image.

Voici mon code :

Partie html :
Génération du tableau JS
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<script>
	var TabSlide = <?php echo json_encode(array_values(array_diff(scandir('Photos/Slide/'), array('..', '.')))); ?>;
</script>
la div concernée
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<div id="SlideShow"><img src="Photos/Slide/Img1.jpg" /></div>

Partie javascript :
Code : 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
$(function() {
	var NbImg = TabSlide.length;
	var EnCours = 1;
 
	setInterval(function(){
		$("#SlideShow").fadeOut("slow");
		$("#SlideShow").empty();
		$("#SlideShow").html('<img src="Photos/Slide/'+TabSlide[EnCours]+'" />');
		$("#SlideShow").fadeIn("slow");
 
		if(EnCours < NbImg - 1 )
			EnCours++;
		else
			EnCours = 0;
	}, 2000);
 
});
Donc, dans l'idée, je veux cacher la dire (fadeOut), vider le contenu, charger le nouveau contenu, et afficher ensuite le nouveau contenu (fadeIn).

Seulement voila, tout ne se passe pas comme je voudrais...

J'ai la première image chargée par défaut, au bout de 2s, la deuxième image remplace brutalement la première, et ensuite j'ai le fadeOut, fadeIn, ce qui n'est pas vraiment ce que je souhaite.

Auriez-vous donc une idée du pourquoi ?

Merci d'avance.