Question

我会尽量保持清醒。请记住，我是一个JQuery新手！

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

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

问题是它消失之后需要延迟，因为它会在您将鼠标悬停在菜单上以使其保持可见之前不断淡出...我猜！

以下是代码：

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

如果您需要更多详细信息，我们将非常感谢您的帮助，并随时告诉我们。

谢谢，

丹尼尔

Answer 1

请你尝试一下......我已经换掉你的fadeIn（500）和fadeout（500）

请参阅 LINK

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

Answer 2

如果我正在思考，那么试试这个：

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

Answer 3

这是因为你将函数作为一个响应函数加入，并且当第一个函数完成时，第二个函数将继续。

$(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秒）。

Div在悬停时不会保持可见

3 个答案: