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?
精彩评论