Souci avec une boucle for

Bonjour,

Je souhaiterai faire un défilement auto d'image avec ce code :

setInterval(function(){
        for (var j = 1; j < 7; j++)
        {
            $('.bottom img:nth-child('+ j + ')').fadeIn(2000).fadeOut(2000);
        }
}, 6000);

J'ai 6 images, mais tout se fait en même temps, alors que moi logiquement
j'aimerais que ça se fasse image par image.

J'avais essayé également avec un code de ce type :

('.bottom img').each(function(){
			if ($(this).is(":visible"))
				{
				$(this).fadeOut(2000);
				$(this).next().fadeIn(2000);
				}
		});

Mais là également tout se fait en même temps, y a aucun temps de transition entre chaque passe de boucle ou de parcours de each. Mouarf

salut,
c'est une erreur assez fréquente qui a été d'ailleurs posée maintes fois sur le forum.
L'appel au fadeIn se fait dans un contexte qui ne permet pas de garder la valeur de j de manière à itérer correctement sur ton élément.
Il faut passer par des fonctions anonymes ou closures pour que j soit "sauvegardée" dans un contexte local :

setInterval(function(){
        for (var j = 1; j < 7; j++)
          function(j){
               $('.bottom img:nth-child('+ j + ')').fadeIn(2000).fadeOut(2000);
           }(j);
   }, 6000);

EDIT: erreur de code
Modifié par Zelalsan (19 May 2016 - 14:54)

Bonjour,

Une solution simple :

$('.bottom img').each(function(i){
    $(this).delay(5000*i).fadeIn(2000).delay(1000).fadeOut(2000)
})

Les tempo sont à reprendre, mais le principe peut-être utile.
NB : la première tempo (celle qui est multipliée par i) doit être égale à la somme des autres.

Bonjour,

merci les gars d'avoir répondu.

Zelalsan a écrit :
L'appel au fadeIn se fait dans un contexte qui ne permet pas de garder la valeur de j de manière à itérer correctement sur ton élément.
Il faut passer par des fonctions anonymes ou closures pour que j soit "sauvegardée" dans un contexte local :

Comment ça se fait que j n'est pas conservé dans le contexte de mon code ?

Sinon avec ton code

setInterval(function(){
        for (var j = 1; j < 7; j++)
		{
          (function(j){
               $('.bottom img:nth-child('+ j + ')').fadeIn(2000).fadeOut(2000);
         })(j);
		}

Malheureusement cela ne fonctionne pas.

Sinon SolidSnake pas bête ton idée d'utiliser un delay, je n'y avait pas pensé ; par contre pourquoi multiplier une tempo par i ? Afin de décaler l'apparition de chaque image ?

Sinon au début, le code fonctionne pour les 2 ou 3 premières images et après ça part en sucette avec certaines images qui vont se superposer à l'affichage :


Modifié par rocketter (20 May 2016 - 10:13)

En fait j'ai répondu n'importe quoi, je ne sais même pas ce que tu cherches à faire à vrai dire .
J'ai l'impression que tu nous parle de slide show ? Si tu as un exemple et ton code au complet ça serait sympa.

En fait j'ai réussi à faire ce que je voulais via cette ligne de code :

setInterval(function(){$('.bottom :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.bottom');
	}, 6000);