I am developing a mega menu for an ecommerce site. I have uploaded the current version here: http://www.nicklansdell.com/menu/. The menu works great with or without javascript at the moment. What I would really like is to improve the usability when the user have javascript enable by creating a short delay before the menu animates out. My jquery code so far is:
$(function() {
// If no JS CSS menu will still work
$("#menu").removeClass("cssonly");
// Find subnav menus and slide them down
$("#menu li a").hover(function(){
$(this).parent().find("div.subnav").fadeIn(200);
$(this).parent().hover(function() {
}, function() {
// On hovering out slide subnav menus back up
$(this).parent().find("div.subnav").fadeOut(200);
})开发者_如何学运维
});
});
Can anyone please help me achieve the delay effect? Many thanks in advance.
I'm assuming you mean that they need to hover over the item for some time before the menu animates. Use the hoverIntent plugin for this instead of hover -- does exactly what I've described.
Delay the hover with setTimeout(), 2nd argument being delay in milliseconds
As suggested by tvanfosson:
$(document).ready(function(){
$("#menu li a.link").hoverIntent({
sensitivity: 3,
interval: 200,
over: animateOut,
timeout: 500,
out: animateIn
});
}); // close document.ready
function animateOut(){
$(this).addClass("current");
$(this).parent().find("div.subnav").fadeIn(200);
}
function animateIn(){
$(this).parent().hover(function() {
}, function() {
// On hovering out fade subnav menus back in
$(this).parent().find("div.subnav").fadeOut(200);
$("#menu li a.link").removeClass("current");
});
}
I have used this script for a similar function.
var menu = {};
menu.laatstGeopend = null;
menu.timeoutTime = 1000;
menu.timeout = null;
menu.init = function()
{
$("#menu>li").hover(
function()
{
// als laatstegeopend dezelfde is als de huidige, dan de timeout verwijderen
if($(this).hasClass("hover"))
{
clearTimeout(menu.timeout);
}
// nieuwe uitschuiven
else
{
$("#menu>li>ul").hide();
$("#menu>li").not(this).removeClass("hover").removeClass("uitklappen_hover");
$(this).addClass("hover");
if($(this).hasClass("uitklappen"))
{
$(this).addClass("uitklappen_hover");
}
$(">ul", this).hide().slideDown(300);
}
// selectbox in
clearTimeout(menu.timeout); menu.timeout = setTimeout(function() { $(menu.laatstGeopend).removeClass("hover uitklappen_hover");
// selectbox in <ie7 tonen if($.browser.msie && $.browser.version < 7) { $("select").css({ visibility: 'visible' }); }
}, menu.timeoutTime); } ); }
精彩评论