Discussion :

[dev14]

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 :

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

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

Et dans mon script, je tente des choses :

Code :

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

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 :

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

$("#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 :

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

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

Merci

[Willpower]

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 :

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

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);

[SpaceFrog]

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

[dev14]

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

[dev14]

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

[NoSmoking]

Bonjour,
Galerie avec effet de fondu

[dev14]

Mille mercis...