prevent action to be executed before it starts
Hello @all,
hopefully anybody can help me with my small problem.
I am building a navigation which animates width on mouseover and revert it on mouseleave.
That navigation also supports keypress/keydown actions, so it behaves like you hover with the mouse and additionally opens the submenu too. My problem is, when using the keydown (C) function, the menu opens up perfectly but when I mouseover then, it fires the 1. function and behaves like it should, it closes.
I tried to stop that when just using keydown, but somehow I am stuck with it.
Thanks in advance for the help!!!
Here comes the code:
$(function () {
// 1. make menu work on mouseover
$
("#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'});
})
});
-
// 2. 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(); });
}
)
}
});
// END
});
Kindly regards,
Daniel