jQ UI Show

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

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:

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

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

 
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI show 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 { width: 500px; height: 200px; }  
  12.          #button { padding: .5em 1em; text-decoration: none; }  
  13.          #effect { width: 240px; height: 155px; padding: 0.4em; position: relative; }  
  14.          #effect h3 { margin: 0; padding: 0.4em; text-align: center; }  
  15.       </style>  
  16.       <script>  
  17.          $(function() {  
  18.             // run the currently selected effect  
  19.             function runEffect() {  
  20.                // run the effect  
  21.                $( "#effect" ).show( "shake", {times: 15,distance: 200}, 1000, callback);  
  22.             };  
  23.             //callback function to bring a hidden box back  
  24.             function callback() {  
  25.                setTimeout(function() {  
  26.                   $( "#effect:visible" ).removeAttr( "style" ).fadeOut();  
  27.                }, 1000 );  
  28.             };  
  29.             $( "#button" ).click(function() {  
  30.                runEffect();  
  31.                return false;  
  32.             });  
  33.             $( "#effect" ).hide();  
  34.          });  
  35.       </script>  
  36.    </head>  
  37.    <body>  
  38.       <div class="toggler">  
  39.          <div id="effect" class="ui-widget-content ui-corner-all">  
  40.             <h3 class="ui-widget-header ui-corner-all">Show</h3>  
  41.             <p>  
  42.              JavaTpoint provides easy and point to point learning of various tutorials such as   
  43.              Java Tutorial, Core Java Tutorial, Android, Design Pattern, JavaScript, AJAX, Python etc.  
  44.             </p>  
  45.          </div>  
  46.       </div>  
  47.       <a href="#" id="button" class="ui-state-default ui-corner-all">Show method with Shake effect</a>  
  48.    </body>  
  49. </html>