Toggle Element Visibility With Slide & Fade Animations - Visibility

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.

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();

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

  • Publication date: 18.06.2019
  • Source

Whoops, looks like something went wrong.

(1/1) ErrorException

file_put_contents(): Only 0 of 260 bytes written, possibly out of free disk space

in Filesystem.php (line 122)
at HandleExceptions->handleError(2, 'file_put_contents(): Only 0 of 260 bytes written, possibly out of free disk space', '/home/p336588/web/ivanovdmitry.com/public_html/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php', 122, array('path' => '/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/JWfz7o1mmuaWleaT7tpjWgOgr4ocAqcuMeK8gSRm', 'contents' => 'a:3:{s:6:"_token";s:40:"P4z9McLsAK0yrEMPyrjbZ5HwGlJa84STbfNEvNLq";s:9:"_previous";a:1:{s:3:"url";s:101:"http://ivanovdmitry.com/blog/post/toggle-element-visibility-with-slide-amp-fade-animations-visibility";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 'lock' => true))
at file_put_contents('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/JWfz7o1mmuaWleaT7tpjWgOgr4ocAqcuMeK8gSRm', 'a:3:{s:6:"_token";s:40:"P4z9McLsAK0yrEMPyrjbZ5HwGlJa84STbfNEvNLq";s:9:"_previous";a:1:{s:3:"url";s:101:"http://ivanovdmitry.com/blog/post/toggle-element-visibility-with-slide-amp-fade-animations-visibility";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 2)in Filesystem.php (line 122)
at Filesystem->put('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/JWfz7o1mmuaWleaT7tpjWgOgr4ocAqcuMeK8gSRm', 'a:3:{s:6:"_token";s:40:"P4z9McLsAK0yrEMPyrjbZ5HwGlJa84STbfNEvNLq";s:9:"_previous";a:1:{s:3:"url";s:101:"http://ivanovdmitry.com/blog/post/toggle-element-visibility-with-slide-amp-fade-animations-visibility";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', true)in FileSessionHandler.php (line 83)
at FileSessionHandler->write('JWfz7o1mmuaWleaT7tpjWgOgr4ocAqcuMeK8gSRm', 'a:3:{s:6:"_token";s:40:"P4z9McLsAK0yrEMPyrjbZ5HwGlJa84STbfNEvNLq";s:9:"_previous";a:1:{s:3:"url";s:101:"http://ivanovdmitry.com/blog/post/toggle-element-visibility-with-slide-amp-fade-animations-visibility";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}')in Store.php (line 128)
at Store->save()in StartSession.php (line 88)
at StartSession->terminate(object(Request), object(Response))in Kernel.php (line 218)
at Kernel->terminateMiddleware(object(Request), object(Response))in Kernel.php (line 189)
at Kernel->terminate(object(Request), object(Response))in index.php (line 58)