temporisation avec setTimeout (fadeOut)

Version imprimable

tout d'abord bonjour à tous

voici mon problème, je tente de faire une fonction fadeOut fonctionnant avec setTimeout afin d'étaler l'effet sur une certaine durée, malheureusement, lors de mes tests, tout s'exécute en même temps. sûrement une erreur toute bête, mais je ne trouve pas, voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // fadeOut : diminue l'opacite d'un objet en un temps donne // obj : objet // opEnd : opacite d'arrive (0-100) // ms : vitesse de changement (ms - pour aller de 100 a 0 d'opacite) // arrayTimer : tableau de timer (optionnel) function fadeOut (obj, opEnd, ms, arrayTimer) { if (arrayTimer != undefined) { for (i=0;i<=arrayTimer.length-1;i++) clearTimeout(arrayTimer[i]); } arrayTimer=new Array(); var opStart = getOpacity(obj); var speed=Math.round(ms/100); var coeff = 0; for (i=opStart-1;i>=opEnd;i--) { arrayTimer.push(setTimeout(function () {setOpacity(obj,i)},(coeff*speed))); coeff++; } }
les fonctions getOpacity et setOpacity ont été testées et fonctionnent à merveille.

merci d'avance pour votre aide.

12/07/2010, 16h58
gwyohm
Bonjour et bienvenue sur le forum developpez.com

Je pense que le problème n'est pas que tout s'execute en même temps, mais que la variable i est commune à tous les appels à setOpacity...

La syntaxe suivante peut paraître bizarre mais elle devrait régler le problème :
Code:

1 2 3 4 5 6 7 8 9 for (i=opStart-1;i>=opEnd;i--) { arrayTimer.push(setTimeout( function(k) { return function(){ setOpacity(obj,k) }; }(i), (coeff*speed))); coeff++; }
Sinon quelques détails,
si opStart est < à opEnd, ca va boucler infiniment...
de plus, quand tu fais :
Code:

1 2 3 var opStart = getOpacity(obj); var speed=Math.round(ms/100);
Le temps spécifié en ms ne sera respecté que si l'opacité de départ est 100 et celle de fin 0. Ne faudrait-il pas mieux
Code:

1 2 3 var opStart = getOpacity(obj); var speed=Math.round(ms/(opStart - opEnd));
12/07/2010, 18h48
jamestout

merci de ta réponse, je teste ça tout de suite.

pour ce bout de code :

Code:

var speed=Math.round(ms/(opStart - opEnd));

je suis d'accord avec toi sur le principe, mais je combine mon fadeOut avec un fadeIn, l'un avec onmouseover l'autre avec onmouseout, l'apparition/disparition doit se faire à un même rythme, même si le fadeIn/fadeOut n'est pas terminé (je suis pas sûr d'être très clair ...).

si opStart est < à opEnd dans ma boucle :

Code:

for (i=opStart-1;i>=opEnd;i--) {...}

i sera aussi < à opEnd, donc ça stop non ?
12/07/2010, 19h01
jamestout

gwyohm, après test, ta solution ne fonctionne malheureusement pas, ou je me suis planté quelque part... je cherche encore

merci de ton aide !

je post dès que j'ai la solution.

ps : je précise au cas où, je teste sous firefox 3.6.6

Bonjour,
Tu as tout à fait raison, pas de risque de boucle infinie.

J'ai testé le code que je t'ai envoyé (directement dans la console firefox) en écrivant un setOpacity qui ne fait qu'un log de la valeur de i (ou plutôt k), et j'ai bien le résultat attendu:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var getOpacity = function() {
 return 100;
};
 
var setOpacity = function(obj, op) {
  console.log(op);
};
 
function fadeOut (obj, opEnd, ms, arrayTimer) {
	if (arrayTimer != undefined) {
		for (i=0;i<=arrayTimer.length-1;i++) clearTimeout(arrayTimer[i]);
	}
	arrayTimer=new Array();
	var opStart = getOpacity(obj);
	var speed=Math.round(ms/100);
	var coeff = 0;
for (i=opStart-1;i>=opEnd;i--) {
  arrayTimer.push(setTimeout( function(k) {
    return function(){
     setOpacity(obj,k)
    };
  }(i), (coeff*speed)));
  coeff++;
}
};
 
fadeOut(null, 0, 5000)

13/07/2010, 15h27
jamestout

Edit : ne pas lire ce message, il arrive que l'on fasse des erreurs sur ses propres erreurs :cry:

salut

j'ai aussi testé différentes valeures : i, k, coeff et coeff*speed en les mettant dans un tableau pour afficher leur variations, j'ai aussi trouvé des résultats corrects (que ce soit ta version ou la mienne), mais lors des tests sur une image, j'ai toujours une disparition immédiate et non progressive.... d'où mon doute sur setTimeout

donc je cherche encore.
14/07/2010, 00h19
jamestout

autant pour moi, en effet ta solution fonctionne, je ne sais pas pourquoi ça buggait avant ce soir .... et toutes mes excuses, le problème était bien tel que tu le disais et jamais j'aurais trouvé tout seul, sur ce coup j'ai du mal à comprendre le pourquoi du comment.

Mais ... nouveau problème, j'utilise mon fadeOut avec un onmouseover, et un fadeIn (très ressemblant) avec un onmouseout sur une image... pas de soucis. Mon paramètre arrayTimer me sert à forcer l'arret de l'un ou l'autre, soucis ça marche pas (on dirait une lutte fadeIn vs fadeOut), là je soupçonne une histoire de variable locale qu'en penses-tu ?

et sinon encore merci !!!

ps : oui, je sais je suis nouveau en javascript, mais je tente quand même !

imaginons que ce sujet serve à quelqu'un d'autre, voici le code fonctionnel :
function.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// setOpacity : change l'opacite d'un objet
//		op : nouvelle valeur d'opacite (0-100)
// 		obj : objet concerne
function setOpacity (obj, op) {
	style = obj.style;
	if (style.opacity != undefined)	style.opacity = (op / 100);
	else if (style.MozOpacity != undefined) style.MozOpacity = (op / 100);
	else if (style.KhtmlOpacity != undefined) style.KhtmlOpacity = (op / 100);
	else if (style.filter != undefined) style.filter = "alpha(opacity=" + op + ")";
}
 
// getOpacity : retourne l'opacite d'un objet (0-100)
//		obj : objet concerne
function getOpacity (obj) {
	var op;
	if (obj.style.opacity != undefined) { (obj.style.opacity=="") ? (op=100) : (op=(obj.style.opacity * 100)); }
	else if (obj.style.MozOpacity != undefined) { (obj.style.MozOpacity == "") ? (op=100) : (op=(obj.style.MozOpacity * 100)); }
	else if (obj.style.KhtmlOpacity != undefined) { (obj.style.KhtmlOpacity == "") ? (op=100) : (op=(obj.style.KhtmlOpacity * 100)); }
	else if (obj.style.filter != undefined) op=(obj.style.filter.substring(14,obj.style.filter.length-1));
	else return null;
	return op;
}
 
// fadeIn : augmente l'opacite d'un objet en un temps donne
//		obj : objet
//		opEnd : opacite d'arrive (0-100)
//		ms : vitesse de changement (ms - pour aller de 0 a 100 d'opacite)
//		arrayTimer : tableau de timer (optionnel)
function fadeIn (obj, opEnd, ms, arrayTimer) {
	if (arrayTimer != undefined) {
		for (i=0;i<=arrayTimer.length-1;i++) clearTimeout(arrayTimer[i]);
	}
	arrayTimer=new Array();
	var opStart = getOpacity(obj);
	var speed=Math.round(ms/100);
	var coeff = 0;
	for (i=opStart;i<=opEnd;i++) {
		arrayTimer.push(setTimeout(
					function(k) {
						return function(){
							setOpacity(obj,k);
						};
					}(i),
					(coeff*speed)
				)
		);
		coeff++;
	}
return arrayTimer
}
 
// fadeOut : diminue l'opacite d'un objet en un temps donne
//		obj : objet
//		opEnd : opacite d'arrive (0-100)
//		ms : vitesse de changement (ms - pour aller de 100 a 0 d'opacite)
//		arrayTimer : tableau de timer (optionnel)
function fadeOut (obj, opEnd, ms, arrayTimer) {
	if (arrayTimer != undefined) {
		for (i=0;i<=arrayTimer.length-1;i++) clearTimeout(arrayTimer[i]);
	}
	arrayTimer=new Array();
	var opStart = getOpacity(obj);
	var speed=Math.round(ms/100);
	var coeff = 0;
	for (i=opStart;i>=opEnd;i--) {
		arrayTimer.push(setTimeout(
					function(k) {
						return function(){
							setOpacity(obj,k);
						};
					}(i),
					(coeff*speed)
				)
		);
		coeff++;
	}
return arrayTimer;
}

et dans ma page web (pour tester) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<HTML>
<HEAD>
<TITLE>Titre de page</TITLE>
<SCRIPT language="JavaScript" src="functions.js" type="text/javascript"></SCRIPT>
</HEAD>
 
<BODY>
<SCRIPT language="JavaScript" type="text/javascript">var fadeTimer=new Array(); </SCRIPT>
<img id="img1" src="monImage.jpg" alt="du texte" onmouseover="fadeTimer = fadeOut(this,50,5000,fadeTimer)" onmouseout="fadeTimer = fadeIn(this,100,5000,fadeTimer)" />
 
</BODY>
</HTML>

28/09/2011, 19h45
realdju

Bonjour et merci pour ce super tuto qui fonctionne à merveille.

Quel serait le bout de code à ajouter afin de retarder le fondu de l'image de quelques secondes. En effet, le but est d'afficher l'image, puis d'utiliser le fadeout pour arriver sur la page d'accueil "réelle" si je puis dire.

J'ai essayé d'insérer la fonction Delay(3000) quelque part mais mon niveau ne m'a pas permis d'arriver à mes bonnes fins.

Merci d'avance j'espère que vous répondrez :)

salut

je n'ai pas connaissance de la fonction Delay en javascript,
mais ça devrait marcher avec un code du genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<HTML>
<HEAD>
<TITLE>Titre de page</TITLE>
<SCRIPT language="JavaScript" src="functions.js" type="text/javascript"></SCRIPT>
 
<SCRIPT language="JavaScript" type="text/javascript">
function myDelay(delay,id,op,ms){
    var obj=document.getElementById(id);
    setTimeout(function(k){return function(){fadeOut(k,op, ms)}}(obj),delay);
}
</SCRIPT>
 
</HEAD>
 
<BODY onload="function(){myDelay(5000,'monImage',0,3000)}">
<img id="monImage" src="monImage.jpg" alt="du texte"/>
 
</BODY>
</HTML>

je n'ai pas testé ce bout de code ... mais ça doit ressembler à ta solution.