Débutant. Comment éviter l'effet de rebond ?

**souffle56** · 17/04/2010, 20h57

Bonsoir,
J'ai un petit programme qui me permet, au survol d'un signe [+], de faire apparaitre un message caché... Ca, ça fonctionne !
Après, je viens de passer plusieurs heures à essayer de faire en sorte que, quand on survole plusieurs fois ce bouton, seul le 1er survol est enregistré, mais rien n'y fait... Il y aurait bien pu y avoir la fonction stop(), qui permet d'éviter ce bigntz là avec la fonction animate(), mais dans le cas présent, j'ai dû me rabattre sur slideDown car cette fonction a l'avantage (quand même) de me permettre d'ajuster la hauteur du bloc caché (à son apparition) en fonction de la hauteur que va occuper le texte caché (vu que le height n'a pas besoin d'être précisé dans la fonction slideDown).
Voilà, peut-être l'un de vous aura déjà été confronté à ce problème de rebond, en tous cas, si vous avez une proposition à me faire, par avance Merci !

Code html + javascript:

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
<html>
<head>
<title>Empecher un rebond</title>
 
<link type="text/css" rel="stylesheet" href="Empecher_un_rebond.css" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
 
<script type="text/javascript">
	$(document).ready(function(){
 
		$(".numero_de_bouton1").mouseover(function (){
			$('.message_numero1 > div').slideDown(500);});
 
		$(".numero_de_bouton1").mouseout(function (){
			$('.message_numero1 > div').slideUp(500);});
	});
</script>
 
</head>
<body bgcolor="#FFFFFF" background="images/Fond.png">
 
<div id="Container" style="position:absolute; width:310px; height:100px; left: 200px; top: 10px">
 
	<div id="Sous_titre" style="width:300">Sous titre</div>
	<div id="Ombre_sous_titre_d"></div>
 
	<div id="Bouton_plus" class="numero_de_bouton1"></div>
	<div id="Texte" style="width:280px">Texte</div>		
	<div id="Ombre_ligne_d"></div>
 
	<span class="message_numero1">
		<!-- Gestion / texte caché -->
			  <div id="Texte_caché" style="display:none; width:290px">
				<span>Texte qui apparait... Texte qui apparait... Texte qui apparait... Texte qui apparait... </span>
				<br /><br />
			  </div>
	</span>
</div>
 
</body>
</html>

Code 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
74
75
76
77
#Container
{
   z-index: 1;
   border: 1px solid #F9CB66;
}
#Sous_titre
{
   float: left;
   height: 20px; 
   background-image: url("images/Degrade_sous_titre.png");
   background-repeat: repeat-x;
   padding: 0px;
   margin: 0px;
   text-align: left;
   line-height: 18px;
   text-indent: 15px;
   color: #9E352F; /* Texte en rouge */
   font-weight: bold; /* Texte en gras */
   font-size: 13px;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#Ombre_sous_titre_d
{
   float: left;
   background-color: #663D1D;
   width:5px; 
   height:17px;
   margin-top: 3px; /* Décalage de l'ombre */
}
#Bouton_plus
{
   float: left;
   width: 20px;
   height: 19px;
   background-color: #FFD9B3;
   background-image: url("images/Plus_mini_2.gif");
   background-position : right; /* Fond avec bouton "Plus" positionné à droite */
   background-repeat: no-repeat;
}
#Texte
{
   float: left;
   height: 19px;
   background-image: url("images/Fond_texte.png");
   background-repeat: repeat-x; 
   text-align: left;
   line-height: 17px;
   text-indent: 1px;
   color: black;
   font-weight: normal;
   font-size: 12px;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#Ombre_ligne_d
{
   float: left;
   background-color: #663D1D;
   width:5px; 
   height:19px;
}
#Texte_caché
{
   float: left;
   background-color: #FFE9D2;
   background-image: url("images/Ombre_ligne_droit.png");
   background-position : right; /* Fond avec ombre positionnée à droite */
   background-repeat: repeat-y;
   text-align: left;
   padding-left: 5px;
   padding-right: 10px;
   line-height: 17px;
   text-indent: 7px;
   color: black;
   font-weight: normal;
   font-size: 12px;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

**danielhagnoul** · 17/04/2010, 23h56

Bonsoir.

Depuis la version 1.4.2, la fonction hover() utilise en interne les événements spéciaux : mouseenter et mouseleave car les événements mouseover et mouseout doivent être bannis, car ils sont source de problèmes bien connus.

La fonction stop(true, true) permet d'atténuer le problème du rebond, mais avec les effets slide ce n'est jamais parfait.

Si on utilise également la fonction delay, l'utilisateur doit laisser -- ici 0.2s -- le pointeur sur la cible, l'effet de rebond est quasi supprimé.

Voir : http://api.jquery.com/stop/ et http://api.jquery.com/delay/

Code :

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

1
2
3
4
5
6
7
8
$(".numero_de_bouton1").hover(
	function(){
		$('.message_numero1 > div').stop(true, true).delay(200).slideDown(500);
	},
	function(){
		$('.message_numero1 > div').stop(true, true).delay(200).slideUp(500);
	}
);

**souffle56** · 18/04/2010, 00h55

Merci danielhagnoul,
pour cette info:

les événements mouseover et mouseout doivent être bannis, car ils sont source de problèmes bien connus.

Je savais pas !
Sinon, je viens d'essayer le code que tu me proposes car, en fonction des informations précisées, je pensais que j'avais enfin la solution... et puis, en fait, à présent, le bouton [+] ne réagit même plus... Spécial, non ?

du fait, j'ai essayé de remplacer

Code :

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

.stop(true, true).delay(200)

par

Code :

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

.stop(true, false).delay(200)

puis par

Code :

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

.stop().delay(200)

mais ça bloque toujours... Ahr, y doit bien y avoir une solution, quand même, non ?

J'ai mis ci-dessous le code en entier (CSS et javascript dans le fichier html, pour simplifier) / à un essai éventuel (j'ai retiré

Code :

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

.stop(true, false).delay(200)

sur les 2 lignes concernées pour qu'au moins, quand on le lance, on voit l'animation), si des fois tu avais le temps d'essayer de ton coté (?)
Quoi qu'il en soit, Merci si tu as quelque suggestion !

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
<html>
<head>
<title>Empecher un rebond</title>
 
<style type="text/css">
#Container
{
   z-index: 1;
   border: 1px solid #F9CB66;
}
#Sous_titre
{
   float: left;
   height: 20px; 
   background-image: url("images/Degrade_sous_titre.png");
   background-repeat: repeat-x;
   padding: 0px;
   margin: 0px;
   text-align: left;
   line-height: 18px;
   text-indent: 15px;
   color: #9E352F; /* Texte en rouge */
   font-weight: bold; /* Texte en gras */
   font-size: 13px;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#Ombre_sous_titre_d
{
   float: left;
   background-color: #663D1D;
   width:5px; 
   height:17px;
   margin-top: 3px; /* Décalage de l'ombre */
}
#Bouton_plus
{
   float: left;
   width: 20px;
   height: 19px;
   background-color: #FFD9B3;
   background-image: url("images/Plus_mini_2.gif");
   background-position : right; /* Fond avec bouton "Plus" positionné à droite */
   background-repeat: no-repeat;
}
#Texte
{
   float: left;
   height: 19px;
   background-image: url("images/Fond_texte.png");
   background-repeat: repeat-x; 
   text-align: left;
   line-height: 17px;
   text-indent: 1px;
   color: black;
   font-weight: normal;
   font-size: 12px;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#Ombre_ligne_d
{
   float: left;
   background-color: #663D1D;
   width:5px; 
   height:19px;
}
#Texte_caché
{
   float: left;
   background-color: #FFE9D2;
   background-image: url("images/Ombre_ligne_droit.png");
   background-position : right; /* Fond avec ombre positionnée à droite */
   background-repeat: repeat-y;
   text-align: left;
   padding-left: 5px;
   padding-right: 10px;
   line-height: 17px;
   text-indent: 7px;
   color: black;
   font-weight: normal;
   font-size: 12px;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
</style>
 
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
 
<script type="text/javascript">
	$(document).ready(function(){
 
$(".numero_de_bouton1").hover(
	function(){
		$('.message_numero1 > div').slideDown(500);
	},
	function(){
		$('.message_numero1 > div').slideUp(500);
	}
);
 
 
 
	});
 
 
 
</script>
 
</head>
<body bgcolor="#FFFFFF" background="images/Fond.png">
 
<div id="Container" style="position:absolute; width:310px; height:100px; left: 200px; top: 10px">
 
	<div id="Sous_titre" style="width:300">Sous titre</div>
	<div id="Ombre_sous_titre_d"></div>
 
	<div id="Bouton_plus" class="numero_de_bouton1"></div>
	<div id="Texte" style="width:280px">Texte</div>		
	<div id="Ombre_ligne_d"></div>
 
	<span class="message_numero1">
		<!-- Gestion / texte caché -->
			  <div id="Texte_caché" style="display:none; width:290px">
				<span>Texte qui apparait... Texte qui apparait... Texte qui apparait... Texte qui apparait... </span>
				<br /><br />
			  </div>
	</span>
</div>
 
</body>
</html>

**danielhagnoul** · 18/04/2010, 02h05

Bonsoir.

Bien entendu j'ai testé le code ! Sinon je le précise dans la réponse !

Mais comme dit dans mon message précédent, nous en sommes à la version 1.4.2 de jQuery, les versions précédentes sont totalement obsolètes ! La version 1.4.3 est même déjà demandée sur la ligne de départ !

En ce qui me concerne, le sujet est

!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
<script>
    $(function(){
        $(".numero_de_bouton1").hover(
            function(){
                $('.message_numero1 > div').stop(true, true).delay(200).slideDown(500);
            },
            function(){
                $('.message_numero1 > div').stop(true, true).delay(200).slideUp(500);
            }
        );
    });
</script>

**souffle56** · 19/04/2010, 01h55

Heu... si j'ai mis

Code :

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

si des fois tu avais le temps d'essayer de ton coté (?)

, c'est juste que je n'ai pas l'habitude que quelqu'un, comme c'est le cas avec toi si j'ai bien compris, prenne le temps de refaire systématiquement des essais / à mon code... C'est tout à ton honneur et excuse-moi si je t'ai quelque peu froissé, même si ,du fait, ça n'était pas du tout mon intention !

A ce propos, merci également pour le temps que tu as pris tout dernièrement pour "tester à la maison" le code que j'avais mis sur mon autre topic du moment !
Et, si ça ne te fait pas de trop les encouragements, Merci aussi pour les infos / à la nouvelle version de jQuery car, du fait, je ne savais pas que la version 1.3 de jQuery pouvait poser des problèmes d'animation ! En plus, commme en témoigne quelqu'un que tu connais bien, il y a aussi d'autres avantages à cette nouvelle version !

A ce propos, pour cet exemple particulier ou d'une façon plus générale, quels sont les élements qui permettraient de discerner si l'on peut utiliser "jquery-1.4.2.min.js" ou si on doit utiliser plutôt la version basique" jquery-1.4.2.js" ?

**danielhagnoul** · 19/04/2010, 02h16

Bonsoir.

Pas fâché et pas vexé, mais très déçu que l'on puisse croire que je réponds à la va-vite alors que j'y consacre des heures ! Lorsque je ne teste pas, je le précise ou j'indique « je suggère d'essayer ». Mais je ne suis pas infaillible, il m'arrive parfois de « passer à côté » ou « d'oublier d'allumer mon cerveau ».

Le « min» est l'abréviation de « minified» (compressé).

Voir : http://www.developpez.net/forums/d89...y/#post5081860

**Gizmo_091** · 23/04/2010, 22h22

Bonjour,
Je sais que je devrais ouvrir un nouveau topic mais j'ai exactement le même problème avec le code suivant :
et tout mettre dans le meme topic permet de centralisé les solutions

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
 
<html>
	<head>
		<title>Test JQuery</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
		<style type="text/css">
			.unDiv {
				background-color:yellow;
				height:200px;
				}
 
			.border {
				border:1px solid black;
				}
 
			#menu .element {
				width:200px;
				height:20px;
				float:left;
				border:1px solid black;
				overflow:hidden;
				}
 
			#menu .element div {
				height:20px;
				}					
		</style>
		<script type="text/javascript">
	    	$(document).ready(function() {
				$('#menu > .element').mouseover(function(){
					var tailleCalc = $('.option',this).size()*20+20;
					$(this).animate({height: tailleCalc+"px",opacity:0.5},"slow");
					});
				$('#menu > .element').mouseout(function(){
					var tailleCalc = 20;
					$(this).animate({height: tailleCalc+"px",opacity:1.0},"slow");
					});
        		});
		</script>
	</head>
	<body>
		<div id="menu">
			<div class="element">
				<div class="title">Menu 1</div>
				<div class="option">Option 1.1</div>
				<div class="option">Option 1.2</div>
			</div>
			<div class="element">
				<div class="title">Menu 2</div>
				<div class="option">Option 2.1</div>
				<div class="option">Option 2.2</div>
			</div>
		</div>
	</body>
</html>

Le problème et que l'acction de mouseout se fait avant que le curseur sorte de la zone :s ( j'ai l'impression que la zone ne s'etant pas avec la taille du div)

Merci d'avance

**Gizmo_091** · 23/04/2010, 22h44

Je crois avoir trouver la solution tout seul. ( enfin en utilisant les indices de reponses dans le sujet )

J'ai remplacé mon code js par ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	    	$(document).ready(function() {
				$('#menu > .element').hover(
					function(){
						var tailleCalc = $('.option',this).size()*20+20;
						$(this).stop(true,true).animate({height: tailleCalc+"px",opacity:0.5},"slow");
						},
					function(){
						var tailleCalc = 20;
						$(this).stop(true,true).animate({height: tailleCalc+"px",opacity:1.0},"slow");
						}
					);
        		});

**danielhagnoul** · 24/04/2010, 01h42

Bonsoir.

Oui, c'est la bonne piste ! Avant de créer une nouvelle discussion (une discussion résolue devant être considérée comme close) il est souvent utile de lire les sujets connexes.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
// jQuery 1.4.2, hover utilise mouseenter et mouseleave
// mouseover et mouseout sont à bannir
$('.element').hover(
	function(){
		 var tailleCalc = $('.option',this).size()*20+20;
		$(this).stop(true, true).delay(200).animate({height: tailleCalc+"px", opacity:0.5},"slow");
	},
	function(){
		var tailleCalc = 20;
		$(this).stop(true, true).delay(200).animate({height: tailleCalc+"px", opacity:1.0},"slow");
	}
);

Débutant. Comment éviter l'effet de rebond ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager