jQuery 菜单悬停

发布于 2024-11-01 23:13:33 字数 675 浏览 4 评论 0原文

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

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() 来实现，但我不确定将其放在哪里。

任何帮助表示赞赏。

原文

I am using the following code to control a pop-up menu.

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);
});

Essentially what happens is when an item-wrapper icon is hovered over it display a contextual tooltip submenu.

However, when you scroll over the menu very quickly numerous tooltips stay visible (as they take 500ms to disappear). I want to change the code so that only the current relative tooltip is visible.

I thought this could be achieved by using $(".tip").hide() somewhere but I'm not sure where to put it.

Any help appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仅此而已 2024-11-08 23:13:33

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

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);
});

Add a class to active tip. Before showing the next, get the size of active class, and hide it

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);
});

回复收藏 0 原文

~没有更多了~