Div不会在悬停时显示

我会尽力并尽可能清楚。请记住，我是一个JQuery新手！Div不会在悬停时显示

我正在使用此代码创建1使用div的JQuery Megamenu。

我希望在悬停时触发菜单，然后使用.dropdowntrigger淡入。然后，我想让菜单在#menuwrap之外的鼠标上淡出。

问题是，在淡入之后需要延迟一段时间，因为它会一直保持淡出状态，然后才能将鼠标悬停在菜单上以使其可见...我想！

下面的代码：

$(function() { 
    $('.dropdowntrigger').hover(function() { 
    $('#menuwrap').fadeIn(500); 
    }, function() { 
    $('#menuwrap').fadeOut(500); 
    }); 
});

任何帮助，这将是非常赞赏，并随时让我知道如果你需要更多的细节。

感谢，

丹尼尔

来源

2014-01-09 DannyBoy

增加淡出时间？（以毫秒为单位） – Krishna

请发布您的html的简化版本，如果#menuwrap不在dropdowntrigger内，那么您所描述的将会发生 – Huangism

您的fadeOut函数应该绑定到'.mouseleave'函数 – timo

-1

那是因为你的加入充当性反应的功能，只是在第一个函数将完成第二个将继续下去。

$(function() { 
    $('.dropdowntrigger').hover(function() { 
    $('#menuwrap').fadeIn(500); 
    }, function() { 
    $('#menuwrap').fadeOut(500); 
    }); 
});

这将在第一个（fadeIn()）函数完成时执行。所以你需要在这里设置两个独立的功能。

尝试改变他们

$('.dropdowntrigger').mouseover(function() { 
    $('#menuwrap').fadeIn(500); 
}); 
$('.dropdowntrigger').mouseleave(function() { 
    $('#menuwrap').fadeout(500); 
});

这样，元素将淡出只有当你鼠标离开元素！

您可以使用setTimeout函数为：

$('.dropdowntrigger').mouseleave(function() { 
    setTimeOut(fadeOutElement, 10000); 
}

而现在，功能：

function fadeOutElement() { 
    $('#menuwrap').fadeOut(); 
}

需要注意的是，setTimeout的是一个函数，它有两个参数。

该函数的名称将被执行！
以毫秒为单位的时间！

setTimeOut(fadeOutElement, 10000)将查找功能名为fadeOutElement和10秒后会执行（10000毫秒是10秒）。

来源

2014-01-09 15:40:01

感谢您的所有意见。我想我想要实现的是在淡出和#menuwrap需要在悬停时保持可见状态之前的延迟。 – DannyBoy

当您使用我提供的代码（第二个）时，元素会在悬停时保持可见状态！以及什么类型的延迟？你可以使用'setTimeOut（）'，然后在这个函数中加上你需要等待的时间。 –

嘿Afzaal，我试过这段代码，但还是没有运气。请你能让我知道我哪里出错了。 $（'。dropdowntrigger'）。mouseover（function（）{（'＃menuwrap'）。fadeIn（500）; }）; $（'。dropdowntrigger'）。mouseleave（） function（）{（'＃menuwrap'）.setTimeOut（1000）.fadeout（500）; }）; }）; – DannyBoy

你可以试试这个...我已经换你的淡入（500）和淡出（500）

看到这个LINK

$(document).ready(function() { 
    $('.dropdowntrigger').hover(function() { 
    $('#menuwrap').fadeOut(500); 
}, function() { 
$('#menuwrap').fadeIn(500); 
}); 
});

来源

2014-01-09 15:43:57

，如果我想对好试试这个：

$('.dropdowntrigger').mouseover(function() { 
$('#menuwrap').fadeIn(500); 
}); 
$('.dropdowntrigger').mouseleave(function() { 
$('#menuwrap').fadeout(500); 
}); 
$('#menuwrap').mouseover(function() { 
$('#menuwrap').fadeIn(); 
}); 
$('#menuwrap').mouseleave(function() { 
$('#menuwrap').fadeout(); 
});

来源

2014-01-09 15:45:10

Div不会在悬停时显示

回答

相关问题