Jquery issue on a menu

JavaScript
1

I’m a bit embarrassed to ask this question because it would require looking at the code soup of the project I’m working on. There’s a long story about that. None the less, the jquery script is in the code.

It’s very inefficient but I haven’t dived heavily into the library yet. The menu on this site is set up to display and hide divs on mouseover. When you move the mouse over the links too quickly, the divs all show on top of one another. This should not happen. Any suggestions on how to fix this?

http://estevancarlos.kodingen.com/aviahack/

For example, move over the “Medical Services, Global Programs, Media Center, About” rapidly and you’ll see.

jQuery('.hiv_btn').mouseover(function(){
    jQuery('.hiv_menu').delay(550).fadeIn("slow");
    jQuery('.global_menu').hide();
    jQuery('.about_menu').hide();
    jQuery('.media_menu').hide();
    jQuery('.services_menu').hide();
    jQuery('.action_menu').hide();
    jQuery('#header-feature').hide();
    jQuery('.hiv_btn').css("background-color","#c44142");
    jQuery('.services_btn').css("background-color","#2b1e16");
    jQuery('.global_btn').css("background-color","#2b1e16");
    jQuery('.about_btn').css("background-color","#2b1e16");
    jQuery('.media_btn').css("background-color","#2b1e16");
    jQuery('.action_btn').css("background-color","#2b1e16");
});

jQuery('.global_btn').mouseover(function(){
    jQuery('.global_menu').delay(550).fadeIn("slow");
    jQuery('.hiv_menu').hide();
    jQuery('.about_menu').hide();
    jQuery('.media_menu').hide();
    jQuery('.services_menu').hide();
    jQuery('.action_menu').hide();
    jQuery('#header-feature').hide();
    jQuery('.global_btn').css("background-color","#c44142");
    jQuery('.services_btn').css("background-color","#2b1e16");
    jQuery('.hiv_btn').css("background-color","#2b1e16");
    jQuery('.about_btn').css("background-color","#2b1e16");
    jQuery('.media_btn').css("background-color","#2b1e16");
    jQuery('.action_btn').css("background-color","#2b1e16");
});

jQuery('.about_btn').mouseover(function(){
    jQuery('.about_menu').delay(550).fadeIn("slow");
    jQuery('.hiv_menu').hide();
    jQuery('.global_menu').hide();
    jQuery('.media_menu').hide();
    jQuery('.services_menu').hide();
    jQuery('.action_menu').hide();
    jQuery('#header-feature').hide();
    jQuery('.about_btn').css("background-color","#c44142");
    jQuery('.services_btn').css("background-color","#2b1e16");
    jQuery('.hiv_btn').css("background-color","#2b1e16");
    jQuery('.global_btn').css("background-color","#2b1e16");
    jQuery('.media_btn').css("background-color","#2b1e16");
    jQuery('.action_btn').css("background-color","#2b1e16");
});

jQuery('.media_btn').mouseover(function(){
    jQuery('.media_menu').delay(350).fadeIn("slow");
    jQuery('.hiv_menu').hide();
    jQuery('.global_menu').hide();
    jQuery('.about_menu').hide();
    jQuery('.services_menu').hide();
    jQuery('.action_menu').hide();
    jQuery('#header-feature').hide();
    jQuery('.media_btn').css("background-color","#c44142");
    jQuery('.services_btn').css("background-color","#2b1e16");
    jQuery('.hiv_btn').css("background-color","#2b1e16");
    jQuery('.global_btn').css("background-color","#2b1e16");
    jQuery('.about_btn').css("background-color","#2b1e16");
    jQuery('.action_btn').css("background-color","#2b1e16");
});

jQuery('.services_btn').mouseover(function(){
    jQuery('.services_menu').delay(350).fadeIn("slow");
    jQuery('.hiv_menu').hide();
    jQuery('.global_menu').hide();
    jQuery('.about_menu').hide();
    jQuery('.media_menu').hide();
    jQuery('.action_menu').hide();
    jQuery('#header-feature').hide();
    jQuery('.services_btn').css("background-color","#c44142");
    jQuery('.media_btn').css("background-color","#2b1e16");
    jQuery('.hiv_btn').css("background-color","#2b1e16");
    jQuery('.global_btn').css("background-color","#2b1e16");
    jQuery('.about_btn').css("background-color","#2b1e16");
    jQuery('.action_btn').css("background-color","#2b1e16");
});

jQuery('.action_btn').mouseover(function(){
    jQuery('.action_menu').delay(350).fadeIn("slow");
    jQuery('.hiv_menu').hide();
    jQuery('.global_menu').hide();
    jQuery('.about_menu').hide();
    jQuery('.media_menu').hide();
    jQuery('.services_menu').hide();
    jQuery('#header-feature').hide();
    jQuery('.action_btn').css("background-color","#c44142");
    jQuery('.services_btn').css("background-color","#2b1e16");
    jQuery('.media_btn').css("background-color","#2b1e16");
    jQuery('.hiv_btn').css("background-color","#2b1e16");
    jQuery('.global_btn').css("background-color","#2b1e16");
    jQuery('.about_btn').css("background-color","#2b1e16");
});


jQuery('.media_menu').mouseleave(function(){
    jQuery('.media_menu').hide();
    jQuery('#header-feature').show();
    jQuery('.media_btn').css("background-color","#2b1e16");
});

jQuery('.about_menu').mouseleave(function(){
    jQuery('.about_menu').hide();
    jQuery('#header-feature').show();
    jQuery('.about_btn').css("background-color","#2b1e16");
});

jQuery('.hiv_menu').mouseleave(function(){
    jQuery('.hiv_menu').hide();
    jQuery('#header-feature').show();
    jQuery('.hiv_btn').css("background-color","#2b1e16");
});

jQuery('.services_menu').mouseleave(function(){
    jQuery('.services_menu').hide();
    jQuery('#header-feature').show();
    jQuery('.services_btn').css("background-color","#2b1e16");
});

jQuery('.global_menu').mouseleave(function(){
    jQuery('.global_menu').hide();
    jQuery('#header-feature').show();
    jQuery('.global_btn').css("background-color","#2b1e16");
});

jQuery('.action_menu').mouseleave(function(){
    jQuery('.action_menu').hide();
    jQuery('#header-feature').show();
    jQuery('.action_btn').css("background-color","#2b1e16");
});
2

If it was me, my recommendation to whoever asked me to have a look at it would be to ditch the jquery and do it properly with just css, if possible, and/or just plain javascript. With jquery you’ll very, very likely be running a lot more code in the background than doing the same thing with plain javascript.

3

I don’t really see a problem with the rapid hovering (at least in Firefox). A bigger problem I see with this menu is that the top level links are not clickable, meaning that some users (such as those on touch screens) may not be able to access the sub pages or menu at all. Drop lists are pretty hard to make fully accessible anyway, but the top level links should always be clickable as a fall back.

4

Agreed. This will be addressed.

Try the rapid hovering a bit more. I thought it was a minor issue but it’s been pretty evident on a few browsers.

5

Found the solution. I needed to add .stop(true, true)

http://www.ianhoar.com/2011/06/05/clearing-the-jquery-animation-queue/