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="http://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>
            JavaTpoint 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

← prev next →