jQuery menu hover

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 开发者_JAVA百科where to put it.

Any help appreciated.

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