MouseOver pendant X secondes

**Elwood J. Blues** · 20/01/2009, 20h10

Bonjour,

Je souhaiterai faire ceci http://jquery.com/files/demo/dl-done.html à un détail près, je veux qu'au lieu de cliquer on passe sur le lien pendant 1/2 seconde pour qu'il s'ouvre tout seul. Donc au lieu de faire ça

Code :

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

1
2
3
4
5
$("dt a").click(function(){
			$("dd:visible").slideUp("slow");
			$(this).parent().next().slideDown("slow");
			return false;
		});

Je fais ça :

Code :

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

1
2
3
4
5
$("dt a").mouseover(function(){
			$("dd:visible").slideUp("slow");
			$(this).parent().next().slideDown("slow");
			return false;
		});

Le mouseover ça marche mais pas de délai évidemment.

En javascript j'avais trouvé une solution qui marchait pas mal

Code :

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

<a onmouseover="attente=setTimeout(function(){alert('Test');},500);" onmouseout="clearTimeout(attente)" href="#">Test</a>

Mais je voudrais utiliser jquery pour rendre plus léger et plus homogène mes scripts !

Merci d'avance !

**Bovino** · 21/01/2009, 08h20

Code :

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

1
2
3
4
5
$("dt a").mouseover(setTimeout(function(){
			$("dd:visible").slideUp("slow");
			$(this).parent().next().slideDown("slow");
			return false;
		}, 500));

**marcha** · 21/01/2009, 09h06

Salut,

A mon avis, si tu veux faire les choses de manière concises à la JQuery
il te faudrait étendre JQuery avec la fonctionnalité voulue.

Voici un exemple:

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
 
(function($) {
 
  $.fn.delayedMouseover = function(callback, options) {
 
	var options = $.extend({ delay: 1000 }, options);
 
	return this.each(function() {
		var obj = $(this);
		var timer = false;
		obj.mouseover( function(event) {
			if(timer) clearTimeout(timer);
			timer = setTimeout( function() { callback.apply(obj[0], [event]); }, options.delay );
		});		
		obj.mouseout( function(event) {
			if(timer) clearTimeout(timer);
			timer = false;
		});		
	});
  };
 
})(jQuery);

Ceci est un "nouvel évènement" qui devrait faire ce que tu veux. (Si j'ai
bien compris avec ton exemple javascript, tu ne souhaite pas déclencher
le over si l'utilisateur ressort de la zone avant le délais.

A l'usage tu peux utiliser delayedMouseover ainsi:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
$("dt a").delayedMouseover( function(event) { 
 
});
 
// ou ainsi
 
$("dt a").delayedMouseover( function(event) { 
 
}, { delay: 500 });

Tu peux modifier le délais par défaut pour qu'il soit adapté à la plupart
des cas.

On pourrait faire mieux en offrant la possibilité de fixer le delay par défaut
de manière publique, rendant ce plugin encore mieux réutilisable.

De la doc sur le sujet ici

**Elwood J. Blues** · 21/01/2009, 19h11

Désolé Bovino ça ne fonctionne pas.

En revanche Marcha : clap clap clap ! Merci beaucoup, ça fonctionne à merveille !

Excellent !

**jojona** · 13/12/2011, 09h50

Bonjour à tous,
J'ai bien suivi les explications antérieur et ça marche très bien, mais j'ai un autre problème, c'est à dire que lorsqu'on survole le menu après certains temps un bloc div ayant le même class que mon lien s'affiche, et je voudrai que lorsque mon souri survole ce div qui apparait ne se referme pas, pourtant à cause de la fonction de rappel sur le menu c'est à dire lors d'un mouseout du menu le bloc div disparait aussi tôt
Mon code se présente ainsi:

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
 
<div id="menu">
<a href="#" class="musique">
<img src="musique.png" alt="musique" />
</a>
<a href="#" class="video">
<img src="video.png" alt="video" />
</a>
</div>
<div id="details_menu">
<div class="musique">
<ul>
  <li>titre 1</li>
 <li>titre 2</li>
</ul>
</div>
<div class="video">
<ul>
  <li>titre 1</li>
 <li>titre 2</li>
</ul>
</div>
</div>

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
 
$('#menu a').bind("mouseover mouseout", function(event) {
		var class_valeur = $(this).attr('class');
		//survol_details = null;
		if(event.type == "mouseover"){
			if(display_timeout != 0) {
				clearTimeout(display_timeout);
			}				
			display_timeout = setTimeout(function(){
				var menu_details = $('#details_menu').find("div."+ class_valeur).animate({marginLeft :'250px'}, 300);
 
				menu_details.mouseover(function(){				
					menu_details.animate({marginLeft : '250px'});
				});
			}, 200);	
		}
 
		if(event.type == "mouseout"){
			if(display_timeout)
				clearTimeout(display_timeout);
			$('#details_menu').find("."+ class_valeur + ":first").animate({marginLeft: '0px'}, 200);			
		}
 
	});

Ce sera d'une grande aide si quelqu'un pouvait m'aider.
Merci

**danielhagnoul** · 13/12/2011, 11h11

Bonjour

Je vous suggère de tester ce code (nécessite jQuery 1.7).

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
// requiert jQuery 1.7 pour $.isNumeric()
(function($) {
  $.fn.delayHover = function(enterCallback, leaveCallback, delay) {
	var d = $.isNumeric(delay) ? parseInt(delay, 10) : 500;
 
	return this.each(function(i, item){
		var objTimeout = null;
 
		$(item).mouseenter(function(event){
			if (objTimeout){
				clearTimeout(objTimeout);
			}
 
			objTimeout = setTimeout( function() { enterCallback.apply(item, [event]); }, d );
		});
 
		$(item).mouseleave(function(event){
			if (objTimeout){
				clearTimeout(objTimeout);
			}
 
			leaveCallback.apply(item, [event]);
 
			objTimeout = null;
		});		
	});
  };
})(jQuery);
 
$('#menu a').delayHover(
	function(){
		$('#details_menu').find("div."+ $(this).attr('class')).animate({marginLeft :'250px'});
	},
	function(){
		$('#details_menu').find("."+ $(this).attr('class') + ":first").animate({marginLeft: '0px'}, 200);
	},
	500
);

**jojona** · 22/12/2011, 16h47

Bonjour danielhagnoul!
Merci pour la réponse, j'ai essayé ce code mais je n'ai pas réussi à le faire fonctionner avec mon programme, vu que je suis encore novice en jquery je n'ai pas pu adapté le plug-in que vous m'avez suggérer.
Au fait j'avais oublier de préciser que les details du menu et la liste de menu se positionnent en aboslue c'est à dire que les details et la liste de menu se chevauche.
De plus, j'ai omis dans mon code que chaque détails du menu à une classe commune et une classe correspondant à la classe du menu.
Voici, le code complet réctifié.

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
<div>
	<div class="details_menu musique">
		<ul>
		  <li>titre 1</li>
		 <li>titre 2</li>
		</ul>
	</div>
	<div class="details_menu video">
		<ul>
		  <li>titre 1</li>
		 <li>titre 2</li>
		</ul>
	</div>
 
	<div class="menu">
		<a href="#" class="musique">
			<img src="musique.png" alt="musique" />
		</a>
		<a href="#" class="video">
			<img src="video.png" alt="video" />
		</a>
	</div>
</div>
 
 
$(document).ready(function(){
var display_timeout = 0;
$('#menu a').bind("mouseover mouseout", function(event) {
		var class_valeur = $(this).attr('class');
 
		if(event.type == "mouseover"){
			if(display_timeout != 0) {
				clearTimeout(display_timeout);
			}
			display_timeout = setTimeout(function(){
				var menu_details = $('#details_menu').find("div."+ class_valeur).animate({marginLeft :'250px'}, 300);
			}, 200);
		}
 
		if(event.type == "mouseout"){
			if(display_timeout)
				clearTimeout(display_timeout);
			$('#details_menu').find("div."+ class_valeur + ":first").animate({marginLeft: '0px'}, 200);
		}
 
	});
});

Je voudrai faire un rappel que mon objectif est d'afficher le div correspondant au menu au survole de la souris sur ce menu et qu'en plus lorsque le div contenant les détails du menu est à son tour survolé celui-ci ne se referme pas tout de suite ou que la souris revient sur le même rubrique du menu, c'est à dire ne pas fermer le div contenant les details que si et seulement si la souris est en dehors du menu et du div correspondant.
Je vous remercie d'avançe.

**SpaceFrog** · 22/12/2011, 17h14

Un truc léger :

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
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title>Nouvelle page 1</title>
<script type='text/javascript'>
 $.wait = function( callback, milliseconds){
   return window.setTimeout( callback, milliseconds );
}
 $(function(){
	$('div').hover( function(){$.wait( function(){alert('coucou')} , 5000 ) } )
})
 </script>
</head>
<body>
<div>wait</div>
</body>
</html>

MouseOver pendant X secondes

jQuery

Discussions similaires

Partager

Partager