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 there is a small error which also occurs at the fotopunch site. When you move your cursor from one menu item to another and back repeatedly it messes up the display temporarily. Is there a way to fix this? I will include part of my javascript file so you can see what I do for each menu item.

$("div#menu .reps").hover(function() {
    //if the current slide is not reps
    if(current_slide != "reps"){
    //move the arrow to the corresponding position for the reps slide 
        $(".arrow").animate({"left":"135px"});//move the arrow
        //(test which slide it is.)
        if(current_slide == "clients"){
            //fade out & hide the current slide
            $(".clients_display").fadeOut().hide();//hide the current slide
            //show the reps slide & fade in
            $(".reps_display").fadeIn().show();//show the slide
            //the current slide is the reps slide
            current_slide = "reps";
        }
        else if(current_slide == "services"){
            //fade out & hide the current slide
            $(".services_display").fadeOut().hide();//hide the current slide
            //show the reps slide & fade in
            $(".reps_display").fadeIn().show();//show the slide
            //the current slide is the reps slide
            current_slide = "reps";
        }
        else{
            //fade out & hide the current slide
            $(".training_display").fadeOut().hide();//hide the current slide
            //show the reps slide & fade in
            $(".reps_display").fadeIn().show();//show the slide
            //the current slide is the reps slide
            current_slide = "reps";
        }
    }
});

I do this for each menu item (there are 4). I think the problem is when it fades out and fades back in because if it tries to do too much at the same time it is displaying 2 of the menu divs at the same time. I tried to add a timeout but was unsuccessful. What is the best way to fix this error? It is small enough to not be a big priority but it would be nice to have it work better. Thanks.

Answer 1

if(current_slide == "clients"){

            $(".clients_display")stop(true, true).fadeOut().hide();

            $(".reps_display").stop(true, true).fadeIn().show();

            current_slide = "reps";

        } else if(current_slide == "services"){

            $(".services_display").stop(true, true).fadeOut().hide();

            $(".reps_display").stop(true, true).fadeIn().show();

            current_slide = "reps";
        } else{

            $(".training_display").stop(true, true).fadeOut().hide();//hide the current slide

            $(".reps_display").stop(true, true).fadeIn().show();//show the slide

         }