Delay Hover Over/Out Events With jQuery - hoverDelay.js

The jQuery hoverDelay.js plugin allows you specify the delay time (in milliseconds) to wait before triggering the hover over and hover out events. Typical use cases for this plugin is to trigger the jQuery hover() function only if your user really intended to enter or leave the element.

How to use it:

1. Download and load the jQuery hoverDelay.js plugin after loading jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.hoverDelay.js"></script>

2. Call the function on the target element and specify the delay time in milliseconds as follows:

$('#element').hoverDelay({
  delayIn: 200,
  delayOut:700
});

3. Do some cool things as you hover over or out of the element.

$('#element').hoverDelay({
  delayIn: 200,
  delayOut:700,
  handlerIn: function($element){
    console.log('in started');
    $element.css({backgroundColor: '#FF0000'});
    console.log('in finished');
  },
  handlerOut: function($element){
    console.log('out started');
    $element.css({backgroundColor: '#ccc'});
    console.log('out finished');
  }
});

---

This awesome jQuery plugin is developed by ronency. For more Advanced Usages, please check the demo page or visit the official website.