Transition d'images en fondu avec jquery

Bonjour, ça fait très longtemps que je n'avais plus touché à jquery et je voudrais me passer de toutes les démos sur le net pour réaliser un simple fondu d'images à l'aide de fadeIn/fadeOut.

Mon html serait une série de 3 images pour faire court :

Code:

---

1 2 3

<img id="img1" src="..." /> <img id="img2" src="..." /> <img id="img3" src="..." />

---

Et dans mon script, je tente des choses :

Code:

---

1 2	setTimeout(function(){ $("#img1").fadeOut('slow') }, 2500).setTimeout(function(){ $("#img2").fadeIn('slow') }, 2500);

---

Je voudrais que les choses se déroulent simplement ainsi avec un enchaînement des actions :

1a - fadeIn de l'image 1
1b - l'image 1 reste 3 secondes en vue
1c - fadeOut de l'image 1

2a - fadeIn de l'image2
...

et arrivé à l'image 3c, on revient à 1a !

Rien de sorcier en théorie, mais j'ai du mal. Pouvez-vous me dire si je m'y prends mal et comment vous verriez la chose?

Edit :

j'ai tenté ça qui fait ce que je veux avec une image :

Code:

---

$("#img1").fadeIn('slow').delay('2000').fadeOut('slow').delay('2000').fadeIn('slow');

---

mais moi je veux enchainer la disparition de l'image 1 et l'arrivée de l'image 2. En gros faire ceci mais ça ne marche pas :

Code:

---

$("#img1").fadeIn('slow').delay('2000').fadeOut('slow').$("#img2").fadeIn('slow');

---

Merci

Bonjour,

en tapant "jquery fadein" dans google, le premier lien t'amènes sur la documentation de la fonction (sur le site de jquery) et tu peux voir qu'elle peut prendre 2 arguments dont le 2ème est un callback en fin d'animation.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function myAnimation(num){ // affiche l'image $("#img"+num).fadeIn('slow',function(){ // attend 3 secondes setTimeout(function(){ // cache l'image $("#img"+num).fadeOut('slow',function(){ // on passe à l'image suivante (avec boucle modulaire) myAnimation(num%3+1); }); },3000); }); }   myAnimation(1);

---

sinon y'a le plugin cycle de jquery qui est très simple a mettre en oeuvre

En vous remerciant pour vos réponses, je n'avais même pas pensé au récursif.

quand je vois ton code aussi court qu'efficace Willpower ça me conforte dans le choix d'essayer de faire un maximum les choses sans passer par des modules de 400 lignes de codes.

Le plugin cycle risque de bien m'intéressé aussi.

Merci ;)

Bonne journée

Bonsoir, je vous redérange pour le même sujet à un petit détail prêt.

J'aimerais continuer sur la lancée du code de Willpower sans utiliser des librairies & co.

Le fondu fonctionne mais l'image disparaît en laissant l'arrière plan vide le temps que l'image suivante arrive.

Ce que j'aimerais, c'est que l'arrivée de l'image 2 en FadeIn se fasse PENDANT la disparition de l'image 1 en FadeOut, et non pas après.

Comme sur l'exemple ci-dessous reprenant jquery cycle.

http://jquery.malsup.com/cycle/basic.html

Bonjour,
Galerie avec effet de fondu

Mille mercis... :ccool: