another suggestion...
Handle the hover with a function, and inside you have the element , and the event. So you know when you are on mouse enter and when on mouse leave. You can use the function properties to save the timer, and clear it when you want.
http://jsfiddle.net/blackjim/jw7Uz/3/
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var handleHover = function(evObj){
var $this = $(this);
if(!$this.hasClass('open')){
return true;
}
if(evObj.type === 'mouseleave'){
// on mouseleave...
handleHover.timer = setTimeout(function(){
$this.removeClass('open');
},2000);
} else if(evObj.type === 'mouseenter'){
// on mouseenter...
if(handleHover.timer){ // find timer and clear it
clearTimeout(handleHover.timer);
delete handleHover.timer;
}
}
};
$('#myDropDown').hover(handleHover);
<!-- end snippet -->
another suggestion...
Handle the hover with a function, and inside you have the element, and the event. So you know when you are on mouseenter and when on mouseleave.
You can use the function properties to save the timer, and clear it when you want.
http://jsfiddle.net/blackjim/jw7Uz/3/
var handleHover = function(evObj){
var $this = $(this);
if(!$this.hasClass('open')){
return true;
}
if(evObj.type === 'mouseleave'){
// on mouseleave...
handleHover.timer = setTimeout(function(){
$this.removeClass('open');
},2000);
} else if(evObj.type === 'mouseenter'){
// on mouseenter...
if(handleHover.timer){ // find timer and clear it
clearTimeout(handleHover.timer);
delete handleHover.timer;
}
}
};
$('#myDropDown').hover(handleHover);
