Mini Slideshow jquery

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:

---

1 2 3

<script> var TabSlide = <?php echo json_encode(array_values(array_diff(scandir('Photos/Slide/'), array('..', '.')))); ?>; </script>

---

la div concernée

Code:

---

<div id="SlideShow"><img src="Photos/Slide/Img1.jpg" /></div>

---

Partie javascript :

Code:

---

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.

Bonjour,
peut être que ceci pourrait t'intéresser, sans jQuery
:fleche: Galerie avec effet de fondu

Merci pour le lien, mais je souhaite comprendre pourquoi ça ne marche pas, car des Slideshow j'en trouve partout sans pour autant les comprendre :?

Bonsoir

1. Construire un sélecteur est une opération coûteuse, il faut stocker l'objet jQuery si on l'utilise plusieurs fois.
2. La méthode html() remplace l'ancien contenu par le nouveau, l'utilisation de la méthode empty() est donc inutile.
3. Pour avoir l'animation voulue, il faut utiliser la fonction de rappel

Code:

---

1 2 3 4 5 6 7

var jObjSlide = $( "#SlideShow" );   jObjSlide .fadeOut( "slow", function(){ jObjSlide .html( '<img src="Photos/Slide/'+TabSlide[EnCours]+'" />' ) .fadeIn( "slow" ); });

---

Parfait !


Merci beaucoup :ccool: