Slidedown-SlideUp avec delay

**Beni-Martouff** · 16/06/2009, 16h12

Bonjour à tous,

J'ai suivi un tuto récemment afin de créer un menu en slide-down/slide-up qui fonctionne avec je l'avoue quelques bugs qui font qu'il n'est pas aussi fonctionnel que je voudrais. C'est à dire que le slide-down s'effectue bien mais si l'utilisateur a le malheur de repasser sur les liens alors que le menu est en train de remonter et bien le menu refait l'aller retour autant de fois que le pointeur a survolé de liens... Très moche et pas fonctionnel du tout. Or je ne sais pas trop comment m'y prendre pour empêcher ce bug et je dois régler ce problème au plus vite (date de livraison très proche).

Sinon, l'autre aspect que je voulais aborder est le "delay" que je voudrais appliquer au survol de mon

Code :

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

<div class="menu-first">Menu</div>

car j'ai trois boutons à mon menu donc 3 dropdown, j'aimerai donc que cela soit plus doux.

Je sais que cela fait beaucoup d'un coup, mais si vous pouvez me donner des pistes ce serait top !

Voici mon code :

HTML

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
 
<div class="dropdown-menu1">
    <div class="menu-first">Menu1</div>
	<ul class="down-list" style="display:none;">
             <li><a href="./lien1.html">Lien 1</a></li>
	     <li><a href="./lien2.html">Lien 2</a></li>
	     <li><a href="./lien3.html">Lien 3</a></li>
	</ul>  
</div>
<div class="dropdown-menu2">
    <div class="menu-first">Menu2</div>
	<ul class="down-list" style="display:none;">
             <li><a href="./lien1.html">Lien 1</a></li>
	     <li><a href="./lien2.html">Lien 2</a></li>
	     <li><a href="./lien3.html">Lien 3</a></li>
	</ul>  
</div>
<div class="dropdown-menu3">
    <div class="menu-first">Menu3</div>
	<ul class="down-list" style="display:none;">
             <li><a href="./lien1.html">Lien 1</a></li>
	     <li><a href="./lien2.html">Lien 2</a></li>
	     <li><a href="./lien3.html">Lien 3</a></li>
	</ul>  
</div>

JS

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
 
$(document).ready(function(){
 
    $('.down-list1').width($('.dropdown-menu1').width()-2);
 
    $('.dropdown-menu1').hover(
      function () {
        $('.menu-first', this).addClass('slide-down'); 
        $('.down-list1', this).slideDown(600);
      }, 
      function () {
        obj = this;
        $('.down-list1', this).slideUp(600, function(){ $('.menu-first', obj).removeClass('slide-down'); });
      }
    );
 
});

Merci d'avance !

**danielhagnoul** · 17/06/2009, 00h06

Bonsoir.

Essayer plutôt fading qui est moins sensible :

Code :

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

1
2
3
4
5
6
7
8
9
 
$(".dropdown-menu").hover(													
	function() {
		$(this).find("ul.down-list").fadeIn("slow");
	}, 
	function() {
		$(this).find("ul.down-list").fadeOut("slow");
	}
);

Tant que le pointeur se promène au dessus des menus il est normal que le hover se déclenche.

**Beni-Martouff** · 17/06/2009, 09h46

Merci danielhagnoul pour ta réponse, néanmoins, je ne peux pas utiliser le fade car mon client souhaite absolument un slide, à savoir qu'il s'agit visuellement d'une sorte de post-it qui glisse de sous le header. Le fade n'est donc pas ma solution.

Par contre peux-tu me renseigner sur l'utilisation du delay ?

Dans mon code je voudrais qu'il s'applique au survol de mon .dropdown-menu, qu'il soit obligatoire de laisser la souris disons 1 sec sur le bouton pour que mon .down-list effectue son slide.

J'avais pensé à ça mais ça ne fonctionne pas :

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
 
$('.dropdown-menu1').hover(
   $(this).delay(1000,function(){
      function () {
	  $('.menu-first', this).addClass('slide-down'); 
	  $('.down-list1', this).slideDown(600);
       }, 
       function () {
          obj = this;
          $('.down-list1', this).slideUp(600,function(){
              $('.menu-first', obj).removeClass('slide-down'); });
	  }
       });
    );
});

Je ne suis pas expert en la matière (je pense que ça vous l'aviez compris...)

Merci pour ce que vous faites en tout cas !

**Folken Laëneck** · 17/06/2009, 20h20

J'ai justement eu un soucis identique il n'y a pas longtemps, et les ruses sont nombreuses pour palier au problème.

On peut utiliser la fonction stop() pour couper court aux animations en cours et lancer la suivante.

Code :

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

1
2
3
4
5
$("div.menu").hover( function() {
	$('ul', this).stop().slideDown();
}, function() {
	$('ul', this).stop().slideUp();
} );

Mais lorsqu'on utilise stop() avec des fonctions comme slideUp / slideDown / slideToggle / fadeIn / fadeOut / ..., on se rend vite compte qu'il y a un soucis.
Il suffit qu'une fois on lance une fermeture alors que l'ouverture n'est pas terminée pour que toutes les ouvertures suivantes s'arrêtent ... là où celle qui a été interrompue en était :/

Il faut obligatoirement connaitre les valeurs finales des propriétés animées si l'on souhaite utiliser stop() - et étrangement, ce comportement n'est pas documenté -.

Autre solution, utiliser les filtres ':not' et ':animated' pour sélectionner les éléments à ne pas animer.

Code :

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

1
2
3
4
5
$('div.menu').hover( function() {
	$('ul', this).find(':not(:animated)').slideDown();
}, function() {
	$('ul', this).slideUp();
} );

Là encore, bien mais pas top. Même si on évite les yoyos en évitant les relancement d'ouvertures sur des éléments déjà en train de s'ouvrir ou pas encore fermés, on a tout de même le cas où l'utilisateur vient survoler pendant une fermeture et doit attendre la fin de celle-ci avant que l'item ne s'ouvre à nouveau - à condition qu'il soit encore au dessus... -.

La meilleure solution que j'ai trouvée est d'utiliser la fonction data() de jQuery pour stocker sur l'élément en lui-même le marqueur qui nous permettra de savoir s'il faut ou non déclencher l'évènement.

Code :

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

1
2
3
4
5
6
7
8
9
$("div.menu").hover( function() {
	$('ul', this).data('hover', true).fadeIn('slow');
}, function() {
	$('ul', this).data('hover', false).animate( { opacity: 1 }, 'slow', function() {
		if(!$(this).data('hover')) {
			$(this).fadeOut('slow');
		}
	} );
} );

Ici, en ouvrant le menu, on lui associe une variable hover à true. En fermant le menu, on redéfini cette valeur à false. La fonction "animate( { opacity: 1 }, 'slow')" n'est là que pour retarder* le déclenchement de la fonction placée en callback - le troisième argument -, qui se charge elle de fermer le menu, mais uniquement s'il n'a pas été réouvert entre temps.

L'avantage de mettre un délai entre la fin de l'état :hover véritable et la fermeture de la boite est double. Il permet de gêrer plus finement son effet en jouant sur le temps laissé entre les deux - ici "slow", donc 600ms sauf erreur - mais aussi de laisser le temps à la souris de revenir dessus s'il s'agit d'une maladresse de l'utilisateur ou si, tout simplement pour des raisons de design il existe un écart, même de quelques pixels, entre l'élément au survol duquel s'ouvre le menu et le contenu du menu lui-même.

Voilà, j'espère que ca t'aidera ;o)

* Après recherche, la fonction delay() semble être comme la cuillère.

[Edit]
Pour le code HTML du menu, je serais plus parti sur une solution de ce genre :

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
<dl id="menu">
	<dt>Menu 1</dt>
	<dd>
		<ul>
			<li><a href="./lien1-1.html">Lien 1</a></li>
			<li><a href="./lien1-2.html">Lien 1</a></li>
			<li><a href="./lien1-3.html">Lien 1</a></li>
		</ul>
	</dd>
	<dt>Menu 2</dt>
	<dd>
		<ul>
			<li><a href="./lien2-1.html">Lien 1</a></li>
			<li><a href="./lien2-2.html">Lien 2</a></li>
			<li><a href="./lien2-3.html">Lien 3</a></li>
		</ul>
	</dd>
	<dt>Menu 3</dt>
	<dd>
		<ul>
			<li><a href="./lien3-1.html">Lien 1</a></li>
			<li><a href="./lien3-2.html">Lien 2</a></li>
			<li><a href="./lien3-3.html">Lien 3</a></li>
		</ul>
	</dd>
</dl>

Sémantiquement, c'est beaucoup plus adapté. En revanche, cela demande de jouer avec les sélecteurs siblings et next pour faire tourner les animations.

**danielhagnoul** · 17/06/2009, 23h23

Bonsoir.

La fonction delay() fonctionne bien.

Mais, même avec un délai de 2s, si l'utilisateur passe son temps à promener son pointeur sur les menus l'effet accordéon (atténué) est toujours présent.

Exemple avec delay() :

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
 
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, 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 red;
			font-size:0.8em;
		}
		.dropdown-menu {
			width:200px;
			height:auto;
			margin:24px;
			border:1px solid red;
		}
	</style>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
 
			//http://james.padolsey.com/javascript/jquery-delay-plugin/
			$.fn.delay = function(time, callback){
				jQuery.fx.step.delay = function(){};
				return this.animate({delay:1}, time, callback);
			}
 
			$('.dropdown-menu').hover(
				function(){
					$(this).delay(2000, function(){
						$(this).find('.down-list').slideDown(600);
					});
				}, 
				function(){
					$(this).delay(2000, function(){
						$(this).find('.down-list').slideUp(600);
					});
				}
			);
  		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div class="dropdown-menu">
			<div class="menu-first">Menu1</div>
 
			<ul class="down-list" style="display:none;">
				<li><a href="./lien1.html">Lien 1</a></li>
				<li><a href="./lien2.html">Lien 2</a></li>
				<li><a href="./lien3.html">Lien 3</a></li>
			</ul>  
		</div>
		<div class="dropdown-menu">
			<div class="menu-first">Menu2</div>
 
			<ul class="down-list" style="display:none;">
				<li><a href="./lien1.html">Lien 1</a></li>
				<li><a href="./lien2.html">Lien 2</a></li>
				<li><a href="./lien3.html">Lien 3</a></li>
			</ul>  
		</div>
		<div class="dropdown-menu">
			<div class="menu-first">Menu3</div>
 
			<ul class="down-list" style="display:none;">
				<li><a href="./lien1.html">Lien 1</a></li>
				<li><a href="./lien2.html">Lien 2</a></li>
				<li><a href="./lien3.html">Lien 3</a></li>
			</ul>  
		</div>
	</div>
</body>
</html>

Edit:
La fonction stop() seule ne donnait rien, mais combinée avec la fonction delay() il y a une amélioration.

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
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, 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 red;
			font-size:0.8em;
		}
		.dropdown-menu {
			width:200px;
			height:auto;
			margin:24px;
			border:1px solid red;
		}
	</style>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
 
			//http://james.padolsey.com/javascript/jquery-delay-plugin/
			$.fn.delay = function(time, callback){
				jQuery.fx.step.delay = function(){};
				return this.animate({delay:1}, time, callback);
			}
 
			$('.dropdown-menu').hover(
				function(){
					$(this).stop(true, false).delay(800, function(){
						$(this).find('.down-list').slideDown(600);
					});
				}, 
				function(){
					$(this).stop(true, false).delay(800, function(){
						$(this).find('.down-list').slideUp(600);
					});
				}
			);
  		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div class="dropdown-menu">
			<div class="menu-first">Menu1</div>
 
			<ul class="down-list" style="display:none;">
				<li><a href="./lien1.html">Lien 1</a></li>
				<li><a href="./lien2.html">Lien 2</a></li>
				<li><a href="./lien3.html">Lien 3</a></li>
			</ul>  
		</div>
		<div class="dropdown-menu">
			<div class="menu-first">Menu2</div>
 
			<ul class="down-list" style="display:none;">
				<li><a href="./lien1.html">Lien 1</a></li>
				<li><a href="./lien2.html">Lien 2</a></li>
				<li><a href="./lien3.html">Lien 3</a></li>
			</ul>  
		</div>
		<div class="dropdown-menu">
			<div class="menu-first">Menu3</div>
 
			<ul class="down-list" style="display:none;">
				<li><a href="./lien1.html">Lien 1</a></li>
				<li><a href="./lien2.html">Lien 2</a></li>
				<li><a href="./lien3.html">Lien 3</a></li>
			</ul>  
		</div>
	</div>
</body>
</html>

**Beni-Martouff** · 18/06/2009, 10h50

Merci beaucoup à vous Folken et danielhagnoul !

Avec tout ça je pense réussir à faire ce que je veux, je vous tiens au courant

Slidedown-SlideUp avec delay

jQuery

Discussions similaires

Partager

Partager