Question

I have been trying to tune up a menu slideshow and have part of my code shown below which I have for each of the 4 items in the menu respectively. I made it so if you move your cursor over a given menu item the corresponding div is shown in the display. I also added a timeout so if you moved from one menu item to another quickly it doesn’t switch from one div to another very quickly. The question I have now to make it work exactly as desired is how do I make it so that it checks whether the cursor is still hovering over a given menu item after 200 milliseconds for example before switching to that menu item? Any comments or help is appreciated. Thanks.

$("div#menu .reps").hover(function() {
    window.clearTimeout(timeoutID);
    timeoutID = window.setTimeout(hoverFunctionReps, 280);
});

function hoverFunctionReps(){
    if(current_slide != "reps"){

        $(".arrow").animate({"left":"135px"});

        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

Perhaps something like this:

http://jsfiddle.net/lucuma/ZgNKG/

var timeoutID;

$(document).ready(function() {
$("a").hover(function() {
    window.clearTimeout(timeoutID);
    $(this).data('hashover', '1');
    var that = this;
     timeoutID=window.setTimeout(
        (function() {
        hoverFunctionReps(that); 
        }), 280);

}, function() {
    $('span', this).hide();
   $(this).data('hashover', '0');
});

function hoverFunctionReps(me) {
    if ($(me).data('hashover') == '1') {
        $('span', me).show();
    }
}
});​