Detect Visibility Change On DOM Element - jQuery HideShow

HideShow is a jQuery visibility detection plugin that watches DOM visibility changes and fires an event when the DOM is shown or hidden.

How to use it:

1. Insert the minified version of the jQuery HideShow plugin after jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="js/hideshow.min.js"></script>

2. Detect for visibility change on DOM for attached elements:

<div id="test_hidden" style="display: none;">
  <h3>This div will fire hidden shown events.</h3>
</div>

$("#test_hidden").hideShow(function(e){
  console.log($(this).is(":visible"));
})

$("#test_hidden").hideShow().on("visibilityChanged", function(event,visibility){
  console.log(visibility);
})

$("#test_hidden").hideShow(function(e, visibility){
  alert("Element " + visibility)
})

$("#test_hidden").hideShow();

$("#test_hidden").on("visibilityChanged", function(event, visibility){
  alert("Element " + visibility)
})

$("#test_hidden").hideShow(function(e, visibility){
  console.log(e, visibility);
})

---

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