Fade in et fade out

**xess91** · 25/10/2009, 01h23

Bonjour,

Je fais en ce quelques tests de script javascript pour réaliser un fade in sur un mouseover et un fade out sur un mouseout.

J'ai fais un petit bout de script qui marche bien quand il y a qu'un seul objet concerné par les fades. Mais dès que je mets plusieurs objets a traiter ça merde.

Je m'explique : je ne souhaite pas faire des fades sur plusieurs objets simultanément, ça c'est dit, mais je souhaite faire des fades sur des objets indépendants. Le truc c'est que lors du passage de la sourie sur les éléments, si un des éléments n'a pas fini son fade et que l'autre le commence ça merdouille ça fait si je peux dire ça comme ça des interférences.

Alors voila le script Js + html + css :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript">
		function opacityin(id, opacStart, opacEnd, millisec) {
 
			var speed = Math.round(millisec / 100);
			var timer = 0;
 
			if(opacStart > opacEnd) {
				for(i = opacStart; i >= opacEnd; i--) {
					setTimeout("changeOpacin(" + i + ",'" + id + "')",(timer * speed));
					timer++;
					}
				} else if(opacStart < opacEnd) {
			for(i = opacStart; i <= opacEnd; i++) {
				setTimeout("changeOpacin(" + i + ",'" + id + "')",(timer * speed));
				timer++;
				}
			}
		}
 
		function changeOpacin(opacity, id) {
			var object = document.getElementById(id).style;
			object.opacity = (opacity * 100);
			object.MozOpacity = (opacity * 100);
			object.KhtmlOpacity = (opacity * 100);
			object.filter = "alpha(opacity=" + opacity + ")";
			}
 
		function opacityout(id, opacStart, opacEnd, millisec) {
 
			var speed = Math.round(millisec / 100);
			var timer = 0;
 
			if(opacStart > opacEnd) {
				for(i = opacStart; i >= opacEnd; i--) {
					setTimeout("changeOpacout(" + i + ",'" + id + "')",(timer * speed));
					timer++;
					}
				} else if(opacStart < opacEnd) {
			for(i = opacStart; i <= opacEnd; i++) {
				setTimeout("changeOpacout(" + i + ",'" + id + "')",(timer * speed));
				timer++;
				}
			}
		}
 
		function changeOpacout(opacity, id) {
			var object = document.getElementById(id).style;
			object.opacity = (opacity / 100);
			object.MozOpacity = (opacity / 100);
			object.KhtmlOpacity = (opacity / 100);
			object.filter = "alpha(opacity=" + opacity + ")";
			}
		</script>
	<head>
<body>
<div style="width:300px;height:30px;background-color:#e411a6;position:relative;" onmouseover="opacityin('color', 0, 100, 500);" onmouseout="opacityout('color', 100, 0, 500);">
<div id="color" style="width:300px;height:30px;background-color:black;position:relative;z-index:1;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;-khtml-opacity:0.0;">
</div>
</div>
<div style="width:300px;height:30px;background-color:#e411a6;position:relative;" onmouseover="opacityin('color2', 0, 100, 500);" onmouseout="opacityout('color2', 100, 0, 500);">
<div id="color2" style="width:300px;height:30px;background-color:black;position:relative;z-index:1;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;-khtml-opacity:0.0;">
</div>
</div>
<div style="width:300px;height:30px;background-color:#e411a6;position:relative;" onmouseover="opacityin('color3', 0, 100, 500);" onmouseout="opacityout('color3', 100, 0, 500);">
<div id="color3" style="width:300px;height:30px;background-color:black;position:relative;z-index:1;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;-khtml-opacity:0.0;">
</div>
</div>
</body>
</html>

pour voir le résultat c'est ici

Merci à tous pour vos réponses.

**Bovino** · 25/10/2009, 07h51

Salut,
Le problèmes est que tes timeout sont anonymes.
Une solution pourrait être de les nommer et de tester leur présence en début de fade :

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
16
function opacityin(id, opacStart, opacEnd, millisec) {
    if(tempo){clearTimeout(timer);}
    var speed = Math.round(millisec / 100);
    var timer = 0;
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            tempo = setTimeout("changeOpacin(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++) {
            tempo = setTimeout("changeOpacin(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

Mais là, tu seras confronté à un autre souci, c'est que certains fondus ne seront pas terminés.
Une solution meilleure (se rapprochant de la notion d'objet, est d'affecter chaque fondu comme propriété de l'élément concerné :

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
16
17
function $(id){return document.getElementById(id);}
function opacityin(id, opacStart, opacEnd, millisec) {
    if($(id).tempo){clearTimeout($(id).tempo);}
    var $(id).speed = Math.round(millisec / 100);
    var $(id).timer = 0;
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            $(id).tempo = setTimeout("changeOpacin(" + i + ",'" + id + "')",(timer * speed));
            $(id).timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++) {
            $(id).tempo = setTimeout("changeOpacin(" + i + ",'" + id + "')",(timer * speed));
            $(id).timer++;
        }
    }
}

**xess91** · 25/10/2009, 11h56

Merci Bovino,

Je viens d'essayer la deuxième possibilité que tu m'as proposé et ça ne marche pas.

Voila le script :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>	
		<title>Première ébauche du site DAC</title>
		<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
			}
 
			function opacityin(id, opacStart, opacEnd, millisec) {
				if($(id).tempo){clearTimeout($(id).tempo);}
				var $(id).speed = Math.round(millisec / 100);
				var $(id).timer = 0;
				if(opacStart > opacEnd) {
					for(i = opacStart; i >= opacEnd; i--) {
						$(id).tempo = setTimeout("changeOpacin(" + i + ",'" + id + "')",(timer * speed));
						$(id).timer++;
						}
					} 
				else if(opacStart < opacEnd) {
					for(i = opacStart; i <= opacEnd; i++) {
						$(id).tempo = setTimeout("changeOpacin(" + i + ",'" + id + "')",(timer * speed));
						$(id).timer++;
						}
					}
				}
 
		function changeOpacin(opacity, id) {
			var object = document.getElementById(id).style;
			object.opacity = (opacity * 100);
			object.MozOpacity = (opacity * 100);
			object.KhtmlOpacity = (opacity * 100);
			object.filter = "alpha(opacity=" + opacity + ")";
			}
 
		function opacityout(id, opacStart, opacEnd, millisec) {
				if($(id).tempo){clearTimeout($(id).tempo);}
				var $(id).speed = Math.round(millisec / 100);
				var $(id).timer = 0;
				if(opacStart > opacEnd) {
					for(i = opacStart; i >= opacEnd; i--) {
						$(id).tempo = setTimeout("changeOpacout(" + i + ",'" + id + "')",(timer * speed));
						$(id).timer++;
						}
					} 
				else if(opacStart < opacEnd) {
					for(i = opacStart; i <= opacEnd; i++) {
						$(id).tempo = setTimeout("changeOpacout(" + i + ",'" + id + "')",(timer * speed));
						$(id).timer++;
						}
					}
				}
 
		function changeOpacout(opacity, id) {
			var object = document.getElementById(id).style;
			object.opacity = (opacity / 100);
			object.MozOpacity = (opacity / 100);
			object.KhtmlOpacity = (opacity / 100);
			object.filter = "alpha(opacity=" + opacity + ")";
			}								
		</script>
	<head>
<body>
<div style="width:300px;height:30px;background-color:#e411a6;position:relative;" onmouseover="opacityin('color', 0, 100, 500);" onmouseout="opacityout('color', 100, 0, 500);">
<div id="color" style="width:300px;height:30px;background-color:black;position:relative;z-index:1;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;-khtml-opacity:0.0;">
</div>
</div>
<div style="width:300px;height:30px;background-color:#e411a6;position:relative;" onmouseover="opacityin('color2', 0, 100, 500);" onmouseout="opacityout('color2', 100, 0, 500);">
<div id="color2" style="width:300px;height:30px;background-color:black;position:relative;z-index:1;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;-khtml-opacity:0.0;">
</div>
</div>
<div style="width:300px;height:30px;background-color:#e411a6;position:relative;" onmouseover="opacityin('color3', 0, 100, 500);" onmouseout="opacityout('color3', 100, 0, 500);">
<div id="color3" style="width:300px;height:30px;background-color:black;position:relative;z-index:1;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;-khtml-opacity:0.0;">
</div>
</div>
</body>
</html>

Pour voir le résultat c'est ici

J'ai dut faire une erreur mais je ne vois pas quoi.
Merci pour vos réponses.

**Bovino** · 25/10/2009, 18h50

Oui, j'ai juste modifié ton code pour te montrer la logique de la chose : affecter un timer directement à l'élément HTML pour éviter les conflits, mais le code à été écrit rapidement et pas testé...
Il faut corriger quelques erreurs (par exemple, pas de déclaration var pour initier les propriétés d'un objet).

**xess91** · 25/10/2009, 19h03

Hum,

j'ai bien compris la variable je l'ai rajouté à l'extérieur des fonctions

var tempo = new Object();

et en plus tu as inversé "$(id).tempo" alors que selon mes recherche ça serait plutot "tempo.$(id)"

mais le problème c'est que ça ne marche pas quand même donc si tu as un exemple concret je suis prenneur.

**Bovino** · 25/10/2009, 19h16

Non, tempo devient bien une propriété de l'objet HTML $(id) !
Du coup, tu ne dois pas déclarer de var, la propriété est ajoutée à l'objet, qui possède donc des propriétés tempo, speed et timer

**xess91** · 25/10/2009, 19h40

alors la je suis perdu !

**Bovino** · 27/10/2009, 19h19

Pour faire simple, ce qui se passe dans ton script est que tu enclenches le timer sur plusieurs éléments.
Tu dois donc créer un timer différent pour chaque élément pour qu'il n'y ai plus de conflit, ou alors, vérifier à chaque fois que tu en déclenches un s'il n'existe pas déjà et faire les traitements adéquats dans ce cas.

Tu peux aussi t'inspirer de ces exemples : http://www.developpez.net/forums/d27...fading-dimage/