JQ UI Hide

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery UI hide

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

Syntax:

 
  1. .hide( effect [, options ] [, duration ] [, complete ] )   

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.

 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI hide Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          .toggler-1 { width: 500px; height: 200px; }  
  12.             #button-1 { padding: .5em 1em; text-decoration: none; }  
  13.             #effect-1 { width: 240px; height: 160px; padding: 0.4em; position: relative; }  
  14.             #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }  
  15.       </style>  
  16.       <script>  
  17.          $(function() {  
  18.             function runEffect() {  
  19.                $( "#effect-1" ).hide( "shake", {times: 10, distance: 200}, 1000, callback );  
  20.             };  
  21.             // callback function to bring a hidden box back  
  22.             function callback() {  
  23.                setTimeout(function() {  
  24.                   $( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();  
  25.                }, 1000 );  
  26.             };  
  27.             // set effect from select menu value  
  28.             $( "#button-1" ).click(function() {  
  29.                runEffect();  
  30.                return false;  
  31.             });  
  32.          });  
  33.       </script>  
  34.    </head>  
  35.    <body>  
  36.       <div class="toggler-1">  
  37.       <div id="effect-1" class="ui-widget-content ui-corner-all">  
  38.          <h3 class="ui-widget-header ui-corner-all">Hide</h3>  
  39.          <p>  
  40.             JavaTpoint provides easy and point to point learning of various tutorials   
  41.            such as Java Tutorial, Core Java Tutorial, Android, Design Pattern, JavaScript,   
  42.           AJAX, SQL, Cloud Computing, Python etc.  
  43.          </p>  
  44.       </div>  
  45.       </div>  
  46.       <a href="#" id="button-1" class="ui-state-default ui-corner-all">Shake Effect Hide</a>  
  47.    </body>  
  48. </html>  

Example of jQuery UI hide() method

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

 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI hide Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          .toggler-1 { width: 500px; height: 200px; }  
  12.             #button-1 { padding: .5em 1em; text-decoration: none; }  
  13.             #effect-1 { width: 240px; height: 160px; padding: 0.4em; position: relative; }  
  14.             #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }  
  15.       </style>  
  16.       <script>  
  17.          $(function() {  
  18.             function runEffect() {  
  19.                $( "#effect-1" ).hide( "shake", {times: 10, distance: 200}, 1000, callback );  
  20.             };  
  21.             // callback function to bring a hidden box back  
  22.             function callback() {  
  23.                setTimeout(function() {  
  24.                   $( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();  
  25.                }, 1000 );  
  26.             };  
  27.             // set effect from select menu value  
  28.             $( "#button-1" ).click(function() {  
  29.                runEffect();  
  30.                return false;  
  31.             });  
  32.          });  
  33.       </script>  
  34.    </head>  
  35.    <body>  
  36.       <div class="toggler-1">  
  37.       <div id="effect-1" class="ui-widget-content ui-corner-all">  
  38.          <h3 class="ui-widget-header ui-corner-all">Hide</h3>  
  39.          <p>  
  40.             JavaTpoint provides easy and point to point learning of various tutorials   
  41.            such as Java Tutorial, Core Java Tutorial, Android, Design Pattern, JavaScript,   
  42.           AJAX, SQL, Cloud Computing, Python etc.  
  43.          </p>  
  44.       </div>  
  45.       </div>  
  46.       <a href="#" id="button-1" class="ui-state-default ui-corner-all">Shake Effect Hide</a>  
  47.    </body>  
  48. </html>