Jquery mousover fade issue
Hi all,
I have some jquery that shows a hidden div when moused over an object, and then hides it when moused out. It works really well, but when I change the show/hide for fadeIn/fadeOut, it seems to play up.
When it shows, if you hover over the span inside the div it fades out. Also, if you move quickly to another div below or above it (its a menu), it will fade out the new one rather than the old, and then show nothing...
Heres the code:
Html:
-
<div class="navhead" rel="2" title="View all of the projects"><span>Projects</span><span class="navbullet"></span></div>
jQuery:
-
$('div.navhead').mouseover(function(){
var my_tooltip = $("#tooltip_menu_" + $(this).attr('rel'));
var curr_pos = $(this).position();
my_tooltip.css({left: curr_pos.left + 214, top: curr_pos.top - 10}).fadeIn();
}).mouseout(function(event){
var my_tooltip = $("#tooltip_menu_" + $(this).attr('rel'));
my_tooltip.fadeOut();
});
I'm a bit stumped here, as it works perfectly until you change the show/hide for fading variants...