Debounce jquery mouseleave event

by 3rror404

HTML

<div id="myElement">

</div>

CSS

#myElement {
  width: 200px;
  height: 200px;
  background: green;
  transition: all .5s ease;
}

#myElement.hovered {
  height: 300px;
  background: red;
}

JavaScript

var element = $('#myElement');
var timer;

element.on('mouseenter',function() {
	clearTimeout(timer);
	$(this).addClass('hovered');
})

element.on('mouseleave',function() {
	timer = setTimeout(function() {
  	element.removeClass('hovered');
  }, 2000);	
})