jQuery qui plante

**vocal94130** · 03/06/2010, 18h24

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...

Voici mon code:

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
 
    <!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 :

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
 
.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.

**danielhagnoul** · 04/06/2010, 00h47

Bonsoir.

Voir : Problème : ma fonction hover() provoque un va-et-vient !

**vocal94130** · 04/06/2010, 10h55

+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/

**devyan** · 04/06/2010, 11h53

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.

**vocal94130** · 04/06/2010, 12h15

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

**devyan** · 04/06/2010, 12h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;"/>

**vocal94130** · 04/06/2010, 14h42

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.

**devyan** · 04/06/2010, 15h30

Je n'ai pas le pb sur FF 3.0.

Quelle version utilises-tu ?

**vocal94130** · 04/06/2010, 18h55

Version 3.6.3

**danielhagnoul** · 04/06/2010, 23h33

Bonsoir.

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

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
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>

**vocal94130** · 10/06/2010, 12h35

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

jQuery qui plante

jQuery

Discussions similaires

Partager

Partager