jQuery qui plante

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

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** · 03/06/2010, 23h47

Bonsoir.

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

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

+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, 10h53

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, 11h15

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

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

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

jQuery qui plante

jQuery

Vue hybride

Discussions similaires

Partager

Partager