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.