开发者

how to rise hover event after some millisecond?

开发者 https://www.devze.com 2022-12-22 00:26 出处:网络
i create a menu and i show and hide submenu on jquery via hover event like follow开发者_JAVA百科ing code

i create a menu and i show and hide submenu on jquery via hover event like follow开发者_JAVA百科ing 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);
        });
}


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


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);


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?

0

精彩评论

暂无评论...
验证码 换一张
取 消