Ajout d'un délai à une fonction de survol

Question

J'ai ce code qui déclenche un méga-menu.

$('li#locations a').hover(function(){ 
$('#locationsSuperNav').slideDown(); 
}); 

$('#locationsSuperNav').mouseleave(function(){ 
$(this).slideUp(); 
}); 

Voici le code html

<div id="nav"> 
<ul id="nav_509815"> 
<li><a href="/Culture/cultureHome">Culture</a></li> 
<li><a href="/Advantage/advantageHome">Advantage</a></li> 
<li><a href="/Testimonials/parentstories">Testimonials</a></li> 
<li><a href="/Programs/programs">Programs</a></li> 
<li class="locations" id="locations"><a href="/Locations/locationsHome">Locations</a></li> 
<li><a href="/Careers/careers">Careers</a></li> 
</ul> 
<div id="locationsSuperNav" class="" style="display: none;">All the content goes here</div> 
</div> 

Ce que je voudrais faire est d'ajouter une minuterie simple à l'événement de vol stationnaire d'origine. De cette façon, si un utilisateur touche accidentellement l'étiquette, il ne tirera pas à moins d'être assis là pendant une demi-seconde environ. Aucune suggestion??

Answer 1

jquery.hoverIntent.js est exactement ce que vous cherchez.

http://plugins.jquery.com/project/hoverIntent

Answer 2

Vous devriez regarder à l'aide de jQuery delay() function.

mise à jour (voir les modifications pour l'histoire)

D'accord. Maintenant, je comprends mieux votre problème. Merci pour la clarification. Je pense que ce code fait ce que vous voulez qu'il fasse. Vous pouvez jouer avec un exemple: http://jsfiddle.net/57eGD/

$('li#locations a').mouseenter(function() { 
    var curElement = this; 
    var timeoutId = setTimeout(function() { 
     $('#locationsSuperNav').slideDown(); 
    }, 650); 

    // Use data so trigger can be cleared. 
    $(curElement).data('timeoutId', timeoutId); 
}).mouseleave(function() { 
    clearTimeout($(this).data('timeoutId')); 
}); 

$('#locationsSuperNav').mouseleave(function() { 
    $(this).slideUp(); 
}); 

Fondamentalement, le retard() ne fonctionnerait pas pour vous que les retards que l'événement, mais il ne permet pas un événement à annuler. Par conséquent, cela ne fonctionnera pas pour vous parce que, même si vous retardez l'événement slideDown(), cela arrivera toujours si l'utilisateur survole. Pour cette raison, vous devez utiliser window.setTimeout, ce qui permet une annulation. Cependant, la partie (en quelque sorte) délicate est que vous devez être en mesure de dire le délai d'annulation. C'est là que le data function de jQuery entre en jeu. Cette fonction vous permet de joindre des données de tout type aux éléments DOM. Donc, dans votre cas, vous devez l'attacher à l'élément que vous voulez déclencher l'événement (dans ce cas, $('li#locations a')) qui vous permettra d'annuler si vous laissez l'élément avant que l'événement ne se déclenche. Vous pouvez régler le 650 pour un délai plus long ou plus court.

L'autre chose à noter est que hover() devrait fonctionner ici au lieu de mouseenter et de mouseleave. Il devrait être quelque chose comme ceci:

$('li#locations a').hover(function() { 
    var curElement = this; 
    var timeoutId = setTimeout(function() { 
     $('#locationsSuperNav').slideDown(); 
    }, 650); 

    // Use data so trigger can be cleared. 
    $(curElement).data('timeoutId', timeoutId); 
}, function() { 
    clearTimeout($(this).data('timeoutId')); 
}); 

J'espère que cela vous aide! Bonne expérience d'apprentissage pour moi aussi.