[jQuery] Jumpy, unpredictable hover() in Firefox
Hi, I've got some hover effects in my menu that go a bit crazy, only
in Firefox. It works fine in Safari (and IE, I'm fairly sure).
//=======================================================
// I slimmed this code down, but it's the same..
// Hide submenu only if it's not current, or not parent of current
$("#menu .trigger:not(.current_parent, .current) > ul").hide();
// .trigger will slide open submenu only if it's not current, or not
parent of current
submenuTrigger = $("#menu .trigger:not(.current_parent, .current)");
submenu = $("#menu .trigger > ul");
// Open submenu on hover over trigger
submenuTrigger.hover(function() {
submenu.slideDown(500);
}, function() {
// do nothing
} );
// Close submenu on hover away from #menu
submenuTrigger.parent().hover(function() {
// do nothing
}, function() {
submenu.slideUp(500);
});
//====================================================
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Line up</a></li>
<li class="trigger current_parent"><a href="#">Competitions</a></li>
<ul>
<li class="current"><a href="#">Kiteboarding</a></li>
<li><a href="#">BMX</a></li>
<li><a href="#">Skate</a></li>
<li><a href="#">Scooters</a></li>
<li><a href="#">Bikini and Boardshorts</a></li>
<li><a href="#">Coconet Cuties</a></li>
</ul>
<li><a href="#">Get Involved!</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
//==========================================================
Link: http://coconetclassic.net.au/
Thanks for your help!
Daz