Execute A Function If An Element Is Visible/Invisible - Visible.js

Execute A Function If An Element Is Visible/Invisible - Visible.js

The Visible.js jQuery element visible detection plugin which utilizes MutationObserver to execute a callback function when an element gets visible or invisible.

1. Import the main JavaScript file Visible.js after the latest version of jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
<script src="Visible.js"></script>

2. Bind the becameVisible and becameUnvisible events to a specific element as follows:

$('#el').on('becameVisible', function() {
  // do something
$('#el').on('becameUnvisible', function() {
  // do something

3. A full example.

<button onclick="toggle();">Toggle</button>
<button onclick="hide();">Hide</button>
<button onclick="show();">Show</button>
Status: <span id="status">[Empty]</span>
<div id="container">
  <h3 id="myContent">This text will be hide or shown</h3>
function toggle() {
function hide() {
function show() {
$(document).ready(function() {
  $('#myContent').on('becameVisible', function() {
  $('#myContent').on('becameUnvisible', function() {

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

  • Publication date: 29.08.2018
  • Source