Toggle Element Visibility With Slide & Fade Animations - Visibility

Visibility is a jQuery plugin to extend the jQuery toggle() method that toggles the visibility of an element with sequential slide and fade animations.

How to use it:

1. Load the minified version of the visibility.js plugin after loading the 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="visibility.js"></script>

2. Toggle the visibility of an element.

<p id="visibility">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatem cum provident aperiam ad deleniti maiores debitis, tempore quis voluptate adipisci dignissimos. Atque cumque voluptatibus sit architecto tenetur, perferendis aperiam.
</p>

$('#visibility').visibilityToggle();

3. Show the element.

<p id="visibility">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatem cum provident aperiam ad deleniti maiores debitis, tempore quis voluptate adipisci dignissimos. Atque cumque voluptatibus sit architecto tenetur, perferendis aperiam.
</p>

$('#visibility').visibilityShow();

4. Hide the element.

<p id="visibility">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatem cum provident aperiam ad deleniti maiores debitis, tempore quis voluptate adipisci dignissimos. Atque cumque voluptatibus sit architecto tenetur, perferendis aperiam.
</p>

$('#visibility').visibilityHide();

Changelog:

2020-05-21

• v1.0.1

---

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