comment augmenter hover événement après quelques millisecondes?

Question

je crée un menu et je montre et cache le sous-menu sur jquery via l'événement hover comme le code suivant

est de quelque façon, afficher ou masquer après une souris millisecondes rester sur eux?

$(" #nav li").hover(function(){ 
     $(this).find('ul:first').show(600); 

     },function(){ 
     $(this).find('ul:first').fadeOut(400); 
     }); 
} 

Answer 1

Vous pouvez consulter hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

Réglez une minuterie dans la fonction handlerIn pour hover(). Effacez la minuterie dans handlerOut.

var timeoutId = { }; 

function show(id) { 
    $("#"+id).find('ul:first').show(600); 
    timeoutId[id]= null; 
} 

function init() { 
     $("#nav > li").hover(
      function(){ 
       var id = $(this).attr('id'); 
       timeoutId[id]= setTimeout(function(){show(id);}, 800); 
      }, 
      function(){ 
       var id = $(this).attr('id'); 
       if (typeof timeoutId[id] != "undefined" && timeoutId[id]!=null) { 
        clearTimeout(timeoutId[id]); 
        timeoutId[id]= null; 
       } 
       $(this).find('ul:first').fadeOut(400); 
      } 
    ); 
    } 

    $(document).ready(init); 

Answer 3

est ici une version plus concise que Cheeso's:

$(function() { 
    $("#Trigger").hover(
     function() { 
      $("#Target").delay(800).fadeIn(0); 
     }, 
     function() { 
      $("#Target").clearQueue().fadeOut(400); 
     } 
    ); 
}); 

delay provoquera #Target pas en fondu pour 800ms. Lorsque vous passez la souris (que ce soit pendant que #Target est entièrement affiché ou en attente d'affichage en raison de delay), clearQueue est appelée. Si cela se produit pendant ces 800 ms, delay et fadeIn sont effacés de la file d'attente. Sinon, la file d'attente sera déjà vide. Dans les deux cas, #Target disparaît immédiatement.

(Notez que vous devez utiliser fadeIn(0) au lieu de show parce show n'est pas quelque chose qui se passe dans la file fx et delay aura donc pas d'effet.)

Et si vous voulez aussi retarder le fadeOut, delay doit aller après clearQueue, pas avant.

Mise à jour

je remarquai que si, au lieu de fadeIn(0), vous utilisez fadeIn(500), mais vous passez la souris au cours de ces 500ms, puis overs hover ultérieures, #Target ne fera que se fanent pour l'opacité qu'il était auparavant autorisé à disparaître. Quelqu'un sait-il si c'est un comportement intentionnel?