jQuery prevent action to be executed before it starts

Question

Hello all,

I am having a small problem. I have a nevigation build which opens when mouse is over, but also listens to keypress, than firing same animation as if mouse is over, just additionally opens the submenu. Now, when keypress is active and I am going with the mouse over that navigation, it fires the closing action before I can click a link. How can I prevent that closing action?

$(function () {

// keypress
$('html').live('keydown', function (e) {
   if ( e.keyCode == 67 ){

       $("#control").animate({width: '+=105', duration:400}, 
           function(){ 
               /*callback*/     
               $("#control").css({overflow:'visible'});
               $("#control-menu li a").fadeTo('fast', 1);
               $("#categories ul").css({marginLeft: '140px', display: 'block'}).fadeIn('slow');
               $('#control').mouseenter(function() { $(this).stop(); });
           }
       )
   }
}); 

// set easing method    
jQuery.easing.def = 'easeInOutExpo'; 

// make menu work   
$("#control-menu li a").css({opacity:'0.1'});
$("#control").hoverIntent(
 function(){
    $(this).stop().animate(
        {width: '+=105',
        duration:400}, function(){ 
            /*callback*/    
            $("#control").css({overflow:'visible'});
            $("#control-menu li a").fadeTo('fast', 1);
        })
 },
 function(){
    $("#control-menu li a").fadeTo('fast', 0.1);
    $(this).stop().animate(
        {width: '-=105', 
        duration:800}, function(){ 
            /*callback*/    
            $("#control").css({overflow:'hidden'});
        })  
 }); 

// END  
});

Thanks in advance for the help!!!!

Kindly regards, Daniel

Answer 1

It looks like it's not firing your closing action, rather it's immediately stopping your animation opening it.

This line in your keydown handler:

$('#control').mouseenter(function() { $(this).stop(); });

Is adding an event handler to #control, bound after your current one is at document.ready, so it executes after. This means when you hover, it's starting the animation, then immediately stopping it, because when keydown was pressed, it added a handler to do this on mouseenter.

If you just remove that line, it'll stop this behavior...but looking at your code I'm unclear why it's there in the first place. If you can describe that it was added to resolve, there should be a better way to do that, not causing this current issue.

Answer 2

Hi Nick,

maybe I should break up the code abit and explain what I was looking to do. I know there would be a better way for sure, but I have to say, I am absolutely novice :)

Ok, lets break it up:

1. // make menu work basically handles the menu appear function on hover. Everything there is working like a charme

2. //keypress here comes the problem. When pressing the "C" on keybord, the navigation makes the same as I go with my mouse over that navigation and the point over "Categories". It opens also the submenu for that point. Now, that all stays. When I now go with my mouse to that menu and want to click a menupoint, I fire the 1. point, so the menu behaves like it supposed to be, it closes. Here was my approach to insert that function:

   $('#control').mouseenter(function() { $(this).stop(); });

directly as a function after the keypress is finished, so that I can enter the mouse there and doesn´t even fire the closing.

Like I agreed above, there would be a better way to do all that. For example read out all the links and generate the keydown dynamicly based on the html-structure and so on... Unfortunately I am a noob, so I won´t get it at that point by myself