jQuery UI Hide

by Online Tutorials Library July 14, 2022

jQuery UI hide

The jQuery hide() method is used to manage jQuery UI visual effects. It applies an animation effect to hide elements.

Syntax:

Parameters of hide method:

Effect: This parameter specifies the effects which are used for transition.
Options: This is used for specifying the specific setting and easing for the effects. Each effect has its own set of options.
Duration: This specifies the time duration and indicates the number of milliseconds of the effect. Its default value is 400.
Complete: It is a callback method. It is called for each element when the effect is completed for the elements.

Example of jQuery UI hide() method

Let’s take an example of jQuery UI shake effect with hide() method.

 <!DOCTYPE html> <html lang=”en”>    <head>       <meta charset=”utf-8″>       <title>jQuery UI hide Example</title>       <link href=”https:://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel=”stylesheet”>       <script src=”http://code.jquery.com/jquery-1.10.2.js”></script>       <script src=”http://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>       <!– CSS –>       <style>          .toggler-1 { width: 500px; height: 200px; }             #button-1 { padding: .5em 1em; text-decoration: none; }             #effect-1 { width: 240px; height: 160px; padding: 0.4em; position: relative; }             #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }       </style>       <script>          $(function() {             function runEffect() {                $( “#effect-1” ).hide( “shake”, {times: 10, distance: 200}, 1000, callback );             };             // callback function to bring a hidden box back             function callback() {                setTimeout(function() {                   $( “#effect-1” ).removeAttr( “style” ).hide().fadeIn();                }, 1000 );             };             // set effect from select menu value             $( “#button-1″ ).click(function() {                runEffect();                return false;             });          });       </script>    </head>    <body>       <div class=”toggler-1″>       <div id=”effect-1″ class=”ui-widget-content ui-corner-all”>          <h3 class=”ui-widget-header ui-corner-all”>Hide</h3>          <p>             tutoraspire provides easy and point to point learning of various tutorials             such as Java Tutorial, Core Java Tutorial, Android, Design Pattern, JavaScript,            AJAX, SQL, Cloud Computing, Python etc.          </p>       </div>       </div>       <a href=”#” id=”button-1″ class=”ui-state-default ui-corner-all”>Shake Effect Hide</a>    </body> </html> 

Test it Now

Next TopicjQuery UI Show

jQuery UI Hide

jQuery UI hide

Example of jQuery UI hide() method

Create and Manage Users in Jenkins

Laravel Middleware

You may also like