[jquery]Menu qui s'ouvre si la souris reste dessus qq secondes

Bonjour,

je voudrait savoir quelle fonction jquery utiliser (si ça existe) pour que mon menu ne s'ouvre que si la souris reste environs 0.5 secondes sur la barre.

Mon code javascript:

$('#row1').mouseover(function() {
	$('.menu').slideDown({ 
	duration: 400, 
	easing: 'easeInExpo'
	});
})

$('nav').mouseleave(function() {
	$('.menu').slideUp({ 
	duration: 400, 
	easing: 'easeInExpo'
	});
})

Voila, la le probleme c'est que le menu s'ouvre dès que la souris passe dessus et ça devient vite agaçant.

.delay() fonction jQuery ( http://api.jquery.com/delay/ )
Ou
setTimeout() fonction JS
Modifié par kenor (05 Nov 2011 - 12:23)

Ca ne fonctionne pas. J'ai utilisé delay mais ça ne donne pas l'effet désiré.

En fait ce que je veux c'est que si l'on passe la souris très vite dans la barre de menu, celui-ci ne s'ouvre pas.
Modifié par aelor (05 Nov 2011 - 13:00)

Bonjour,

Il y a le plugin jQuery hoverIntent qui a pour but de résoudre ce problème.

Ah super, ça à l'air d'être la solution à mon problème.

Merci beaucoup!

Ca y est ça fonctionne parfaitement.

Pour ceux qui rencontreront le même problème:

http://cherne.net/brian/resources/jquery.hoverIntent.html

Mon code:

function makeTall(){
	$('.menu').slideDown({ 
	duration: 400, 
	easing: 'easeInExpo'
	});
}

function makeShort(){
	$('.menu').slideUp({ 
	duration: 400, 
	easing: 'easeInExpo'
	});
}

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 0, // number = milliseconds delay before onMouseOut    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("nav").hoverIntent( config )

Voilà, sans oublier dans mon cas, que j'ai installé le plug in jquery.easing.

Un gros gros merci a fvsch pour les heures de galères épargnées!

Une solution alternative : « Pourquoi les menus affichés au survol font plus de mal que de bien aux utilisateurs ».

Soit dit en passant, je trouve hoverIntent un peu volumineux pour juste ce petit effet.
Un setTimeout avec une fonction qui vérifie qu'on se trouve toujours sur l'élement en question me semble plus rapide à exécuter.

Hello.

@kenor C'est exactement de cette façon que le plugin fonctionne. C'est juste dommage qu'il n'utilise pas l'API des special events.

Kenor tu as surement raison mais comme tu as du t'en rendre compte je ne suis pas une star du javascript. J'ai fait au plus simple (pour moi).

Sinon l'article est intéressant. Dans mon cas je trouve que l'ouverture au survol reste la bonne solution mais c'est vrai qu'il ne faut pas l'appliquer à toutes les sauces.