jQuery qui plante

Version imprimable

jQuery qui plante

Bonjour,

Je souhaite faire un effet fadeIn() et fadeOut() avec JQuery!

Quand on survol un lien l'image apparait et celle d'avant disparait

Quand mes images sont juste d'une couleur rouge, bleu... il n'y a aucun problème c'est fluide. Par contre quand je rajoute par exemple un carré noir sur l'image la tout plante dans mes fadeIn/Out . Je ne comprends pas pourquoi parce l'image fait 2,5 Kio en JPG. Le problème est le même en hébergement local ou sur un serveur.

Quand je survol avec la souris sur salarie(en bas) le vert apparaît, celui dans haut le rouge apparaît...

http://nsa15.casimages.com/img/2010/...2025354881.png

Voici mon code:

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
 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>G2R - formation</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
	<link rel="stylesheet" type="text/css" href="css/general.css"/>
	<link rel="stylesheet" type="text/css" href="css/welcome.css"/>
 
	<script type="text/javascript" src="includes/js/jquery-1-4-2-min.js"></script>
 
   </head>
   <body>
 
	<script type="text/javascript">
 
		var actuel = "#img3";
 
		function see1(){
			jQuery(actuel).fadeOut(1000);
			jQuery("#img1").fadeIn(1000);
			actuel="#img1";
		}
		function see2(){
			jQuery(actuel).fadeOut(1000);
			jQuery("#img2").fadeIn(1000);
			actuel="#img2";
		}
		function see3(){	
			jQuery(actuel).fadeOut(1000);
			jQuery("#img3").fadeIn(1000);
			actuel="#img3";
		}
	</script>
 
 
 
			<span class="p1" onMouseOver="javascript:see1()">
				salarie
			</span><br />
			<span class="p2" onMouseOver="javascript:see2()">
				salarie
			</span><br />
			<span class="p3" onMouseOver="javascript:see3()">
				salarie
			</span>
 
			<img class="img" id="img1" src="images/img1.jpg"/>
			<img class="img" id="img2" src="images/img2.jpg"/>
			<img class="img" id="img3" src="images/img3.jpg"/>
 
   </body>
</html>

Et mon CSS :

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
 
.p1{
	display:inline-block;
	position:relative;
	width:200px;
	height:100px;
	background-color:red;
}
.p2{
	display:inline-block;
	position:relative;
	top:-10px;
	width:200px;
	height:100px;
	background-color:blue;
}
.p3{
	display:inline-block;
	position:relative;
	top:-10px;
	width:200px;
	height:100px;
	background-color:green;
}
 
#img1{
	position:absolute;
	left:208px;
	top:8px;
	height:290px;
}
#img2{
	position:absolute;
	left:208px;
	top:8px;
	height:290px;
}
#img3{
	position:absolute;
	left:208px;
	top:8px;
	height:290px;
}

Merci de votre aide.

03/06/2010, 23h47
danielhagnoul

Bonsoir.

Voir : Problème : ma fonction hover() provoque un va-et-vient !
04/06/2010, 09h55
vocal94130

+1 lien très instructif merci !

Cependant mon problème n'est pas celui-ci!

voir : http://www.g2r-formation.fr/~g2rtest/blobloo/
et : http://www.g2r-formation.fr/~g2rtest/blablaa/
04/06/2010, 10h53
devyan

Bonjour,

C'est un problème d'initialisation.

En fait toutes tes images sont visibles au chargement.
Une fois que tu as fait un survol de chacune des 3 cases de gauche cela fonctionne correctement.

devyan.
04/06/2010, 11h15
vocal94130

Et comment puis-je régler le problème?

Citation:

Envoyé par vocal94130

Et comment puis-je régler le problème?

En masquant (display:none) par défaut ceux qui ne doivent pas être visibles à l'affichage de la page. ;)
Code:

1 2 3 <img class="img" id="img1" src="images/img1.jpg"/> <img class="img" id="img2" src="images/img2.jpg" style="display:none;"/> <img class="img" id="img3" src="images/img3.jpg" style="display:none;"/>

04/06/2010, 13h42
vocal94130

Oki oki mais en fait le problème ce n'est pas ça!

Le truc c'est que sous mozilla quand je lance la page et que je survol les différents "salarie" mozilla plante sur mon PC alors que en fait sur les autres PC ça marche donc finalement ce n'est pas un problème JQuery mais c'est au niveau de mon mozilla

Merci de votre aide, je tiens quand même compte des remarques.
04/06/2010, 14h30
devyan

Je n'ai pas le pb sur FF 3.0.

Quelle version utilises-tu ?
04/06/2010, 17h55
vocal94130

Version 3.6.3

Bonsoir.

Je viens de tester le code suivant sans problème :

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		#p1{
			display:inline-block;
			position:relative;
			width:200px;
			height:100px;
			background-color:red;
		}
		#p2{
			display:inline-block;
			position:relative;
			top:-10px;
			width:200px;
			height:100px;
			background-color:blue;
		}
		#p3{
			display:inline-block;
			position:relative;
			top:-10px;
			width:200px;
			height:100px;
			background-color:green;
		}
		#img1{
			display:none;
			position:absolute;
			left:208px;
			top:8px;
			height:290px;
		}
		#img2{
			display:none;
			position:absolute;
			left:208px;
			top:8px;
			height:290px;
		}
		#img3{
			display:none;
			position:absolute;
			left:208px;
			top:8px;
			height:290px;
		}		
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>	
 	<script>
		$(function(){
			var actuel = "#img3";
 
			$("#img3").show();
 
			$("#p1").mouseenter(function(){
				$(actuel).fadeOut(1000);
				$("#img1").fadeIn(1000);
				actuel = "#img1";
			});
 
			$("#p2").mouseenter(function(){
				$(actuel).fadeOut(1000);
				$("#img2").fadeIn(1000);
				actuel = "#img2";
			});
 
			$("#p3").mouseenter(function(){	
				$(actuel).fadeOut(1000);
				$("#img3").fadeIn(1000);
				actuel = "#img3";
			});
 
		});
	</script>
</head>
<body>
	<div id="conteneur"> 	
 
		<span id="p1">
			salarie
		</span>
		<br />
		<span id="p2"">
			salarie
		</span>
		<br />
		<span id="p3"">
			salarie
		</span>
		<img id="img1" src="../images/tut_thumb.jpg"/>
		<img id="img2" src="../images/free_thumb.jpg"/>
		<img id="img3" src="../images/inspire_thumb.jpg"/>
 
	</div>
</body>  
</html>

10/06/2010, 11h35
vocal94130

Désolé du retard, je vais voir ceci et je post le résultat ensuite !