Question

我使用以下代码来控制弹出菜单。

var timeouts = {};
$(".item-wrapper").hover(function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.fadeIn("fast").show(); }, 50);
},
function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.hide() }, 500);
});

基本上发生的事情是当项目包装器图标悬停在它上面时会显示一个上下文工具提示子菜单。

然而，当您快速滚动菜单时，许多工具提示保持可见（因为它们需要500毫秒才能消失）。我想更改代码，以便只显示当前相对工具提示。

我认为这可以通过使用$（“。tip”）。hide（）在某处实现，但我不知道该放在哪里。

任何帮助表示感谢。

Answer 1

将一个类添加到活动提示。在显示下一个之前，获取活动类的大小，并隐藏它

var timeouts = {};
$(".item-wrapper").hover(function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if(!el.hasClass('active') && $('.active').size() > 0)
    $('.active').removeClass('active').hide();
el.addClass('active');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.fadeIn("fast").show(); }, 50);
},
function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.hide() }, 500);
});

jQuery菜单悬停

1 个答案: