MouseOver pendant X secondes

Version imprimable

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

MouseOver pendant X secondes
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:

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

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:

<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 !

Code:

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

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:

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:

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

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

Désolé Bovino ça ne fonctionne pas.

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

Excellent !

Besoin d'aide

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:

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:

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

Bonjour

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

Code:

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
);

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:

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.

Un truc léger :

Code:

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>