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