jQuery UI show

The jQuery show() method is used to manage jQueryUI visual effects. It is intended to display an item using the indicated effect. It specifies the visibility of the elements, which are wrapped within the specified effects.

Syntax:

Parameters of show 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.

jQuery UI show example

Let's take an example to demonstrate the jQuery UI show() method

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI show 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 { width: 500px; height: 200px; }
         #button { padding: .5em 1em; text-decoration: none; }
         #effect { width: 240px; height: 155px; padding: 0.4em; position: relative; }
         #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      <script>
         $(function() {
            // run the currently selected effect
            function runEffect() {
               // run the effect
               $( "#effect" ).show( "shake", {times: 15,distance: 200}, 1000, callback);
            };
            //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>
   </head>
   <body>
      <div class="toggler">
         <div id="effect" class="ui-widget-content ui-corner-all">
            <h3 class="ui-widget-header ui-corner-all">Show</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, Python etc.
            </p>
         </div>
      </div>
      <a href="#" id="button" class="ui-state-default ui-corner-all">Show method with Shake effect</a>
   </body>
</html>

Test it Now

Next TopicjQuery UI Toggle

← prev next →