ajouter un délai à cette jquery sur le vol stationnaire

Question

J'utilise ce code:

var timeout = 500; 
var closetimer = 0; 
var ddmenuitem = 0; 

function navBar_open() 
{ navBar_canceltimer(); 
    navBar_close(); 
    ddmenuitem = $(this).find('ul').css('visibility', 'visible');} 

function navBar_close() 
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} 

function navBar_timer() 
{ closetimer = window.setTimeout(navBar_close, timeout);} 

function navBar_canceltimer() 
{ if(closetimer) 
    { window.clearTimeout(closetimer); 
     closetimer = null;}} 

$(document).ready(function() 
{ $('#navBar > li').bind('mouseover', navBar_open) //mouseover 
    $('#navBar > li').bind('mouseout', navBar_timer)}); //mouseout 

document.onclick = navBar_close; 

qui fonctionne très bien

ce que je voudrais faire est d'ajouter un délai à l'événement mouseover

Je vais être honnête, j'ai trouvé ce code sur un autre site et je ne comprends pas complètement comment cela fonctionne. Je comprends que lorsque l'utilisateur sourit, la fonction navBar_timer est appelée, ce qui ajoute un certain délai avant que le menu déroulant ne soit à nouveau caché, mais je ne vois pas comment implémenter un hover au passage de la souris.

toute orientation serait appréciée

grâce

Answer 1

c'est ce que vous cherchez ... cliquez http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

Essayez de changer ceci:

$(document).ready(function() 
{ $('#navBar > li').bind('mouseover', navBar_open) //mouseover 
    $('#navBar > li').bind('mouseout', navBar_timer)}); //mouseout 

à ceci:

$(document).ready(function() { 
    $('#navBar > li').hover(function() { 
     closeHoverTimer = window.setTimeout(navBar_open, 500); //500ms timeout); 
    }, function() { 
     navBar_timer(); 
     window.clearTimeout(closeHoverTimer); 
    }); 
}); 

Answer 3

Quelle version de JQuery êtes-vous en utilisant? Si vous utilisez le nouveau (1.4), vous devriez pouvoir utiliser la nouvelle fonction $.delay(). Ensuite, tout ce que vous auriez à changer est une ligne dans navBar_open() à:

ddmenuitem = $(this).find('ul').delay(timeout).css('visibility', 'visible'); 

Answer 4

Je deuxième recommandation de Reigel d'utiliser le plug-in hoverIntent. Pour retarder d'autres fonctions jquery, je tends à utiliser cette fonction:

var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
     clearTimeout (timer); 
     timer = setTimeout(callback, ms); 
    }; 
    })(); 

et l'appeler:

delay (function() { 
    // add whatever function you want delayed by 2 secs 
}, 2000); 

Answer 5

Cela devrait fonctionner également:

$('#navBar > li').hover(
     function() { 
      var newthis = $(this); 
      timer = setInterval(function() {showTip(newthis)}, delay); 
     }, 
     function() { 
      clearInterval(timer); 
      $(this).find('ul:visible').fadeOut(speed); 
     }, 
     showTip = function(newthis) { 
      clearInterval(timer); 
      newthis.find('ul:hidden').fadeIn(speed); 
     } 
    ); 

Answer 6

Quelque chose comme ça fera l'affaire avec jquert 1.4 et plus. Pas besoin de plug-in hoverIntent:

$("#yourdiv").hover(function(){ 
    $(this).stop(true).delay(400).animate({"height":"300px"},800, "easeOutBounce"); 
},function(){ 
    $(this).stop(true).animate({"height":"25px"}, 300, "easeOutBack"); 
}); 

juste ajouter la fonction de retard après l'élément d'arrêt. Si vous passez la souris sur l'élément, il attend 400 ms avant d'agrandir le menu. Si vous déplacez la souris hors de l'élément avant le délai de 400 ms, le menu ne s'ouvre pas.