how to rise hover event after some milisecond?

Question

hello

i create a menu and i show and hide submenu on jquery via hover event like follwing code

is any way, submenu show or hide after some milisecond mouse stay over them?

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

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

thanks

Answer 1

You may want to check out hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

Set a timer in the handlerIn function for hover(). Clear the timer in 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

Here's a more concise version than Cheeso's:

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

delay will cause #Target not to fade in for 800ms. When you hover out (regardless if it's while #Target is fully displayed or waiting to be displayed due to delay), clearQueue is called. If it happens during those 800ms, delay and fadeIn are cleared from the queue. Otherwise the queue will already be empty. In either case, #Target is faded out immediately.

(Note that you need to use fadeIn(0) instead of show because show isn't something that goes on the fx queue and delay will therefore have no effect.)

And if you also want to delay the fadeOut, delay needs to go after clearQueue, not before it.

Update

I noticed that if, instead of fadeIn(0), you use fadeIn(500), but you hover out during those 500ms, then on subsequent hover overs, #Target will only fade in to the opacity that it was previously allowed to fade in to. Anybody know if this is intended behavior?