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.