mouseclick - Agregar retraso MouseOut a esta parte de jQuery(menú nav)

mouseenter mouseclick

Question

Soy un absoluto jQuery novato completo. He estado siguiendo un tutorial para agregar un menú de navegación CSS / jQuery a mi sitio, y lo he hecho funcionar. Lo único que me gustaría ver agregado es un pequeño retraso en Mouse out, porque el menú desplegable está desapareciendo al instante cuando sacas el mouse, lo que hace que el menú sea un poco molesto de usar. Aquí está mi script:

function mainmenu(){
$(" .top-menu ul ").css({display: "none"}); // Opera Fix
$(" .top-menu li").hover(function(){
  $(this).find(''ul:first'').css({visibility: "visible",display: "none"}).show(400);
  },function(){
  $(this).find(''ul:first'').css({visibility: "hidden"});
  });
}

 $(document).ready(function(){
 mainmenu();
});

¿Alguien sería tan amable de agregar el código necesario a este script? Prometo estudiar cómo lo has hecho, así que en realidad aprendo de él ;-D

Answer 1

Podría hacer algo como esto, dándole un retraso de 500ms:

function mainmenu(){
  $(".top-menu ul ").hide();
  $(".top-menu li").hover(function() {
    clearTimeout($.data(this, ''timeout''));
    $(this).find(''ul:first'').show(400);
  }, function() {
    $.data(this, ''timeout'', setTimeout($.proxy(function() { 
       $(this).find(''ul:first'').hide();
    }, this), 500));
  });
}
$(mainmenu);

Esto agrega una demora de 500 ms a través de setTimeout() y simplemente almacena la identificación del temporizador con el elemento usando $.data() , cuando se desplaza hacia atrás en el elemento, borrará el tiempo de espera y no lo ejecutará nuevamente hasta que se exceda ... así que tienes que estar fuera del elemento durante 500ms para que se oculte.

O bien, haga algo muy similar con el plugin hoverIntent que es solo por este problema.

Answer 2

$(" .top-menu li").hover(function(){
    $(this).find(''ul:first'').css({visibility: "visible",display: "none"}).show(400);
},function(){

    // Note here...
    setTimeout(function(){
        $(this).find(''ul:first'').css({visibility: "hidden"});
    }, 2000);
    // 2000 is a delay time in milliseconds, change it

});