jQuery菜单的幻灯片悬停功能加载太快

Question

I am currently making a website that includes a menu navigation almost identical to the one found at fotopunch.com only instead of pointing down it points up. Anyways, I wrote the code using jquery/javascript for the menu and it works but That way when you hover quickly over an item it doesn't cause the page to load unnecessarily. If anyone has any suggestions I would greatly appreciate it.

Below is a copy of part of my code to create the menu navigation. Another issue I am having is if you hover over too many navigation items in a row the arrow lags behind. I am hoping that by creating a wait time before the hover function takes effect that it would mostly correct this issue.

$("div#menu .reps").hover(function() {

if(current_slide != "reps"){
    $(".arrow").animate({"left":"135px"});//move the arrow
    if(current_slide == "clients"){
        $(".clients_display").stop(true, true).fadeOut().hide();
        $(".reps_display").fadeIn().show();
        current_slide = "reps";
    }
    else if(current_slide == "services"){
        $(".services_display").stop(true, true).fadeOut().hide();
        $(".reps_display").fadeIn().show();
        current_slide = "reps";
    }
    else{
        $(".training_display").stop(true, true).fadeOut().hide();
        $(".reps_display").fadeIn().show();
        current_slide = "reps";
    }
}
});

Answer 1

You an use the delay on some of your calls such as:

$(".reps_display").delay(100).fadeIn().show();

Or you can make some of the show and hide have a longer duration: show(2000) for instance.

Answer 2

I think that something that you can do, although there is probably a better way is:

declare a function where you place all the code with a condition:

function hoverFunc(option)
{
    if($(option).is(':hover'))
    {
      all the code to show the menu
    }
}

And on the over function you do:

$("div#menu .reps").hover(function() {
   setTimeout("hoverFunc('"+getOptionName+"')",milliseconds);
});

The idea is: when over, set a timeout and when the timeout is reached, check if the mouse is over and then do whatever you want, the hardest point is to pass the reference to the function, but you can pass the name of the item just getting it from html or a rel attribute.

But if you dont need the reference it is really ease, just call the function and check the element.

---

There is another option that maybe is more interesting for you. You can add a delay to the all the effects and add a stop(true) before, this way, if the user change the tag fast, the events will be cancelled, but it will change if the user goes through an option fast and goes out of the menu.