jQuery UI | show() Method

Last Updated : 23 Apr, 2020

The show() method of jQuery UI framework displays or manages all types of visual effects for the matched selected elements whose styles are designed in the CSS code for the user interface.

Syntax:

(selector).show( effectType[, options ] [, duration ] [, complete ] );

Parameters: It accepts a parameter “effectType” which is the type of the visual effect that are going to be added.

effectType: The type is string. It specifies the type of the effect which is used for the transition.
options: The type is object . It specifies the options required for the specific setting for easing.
duration: The types are number or string . This specifies about, how long the animation effect should run for example fast, slow or 400ms
complete: This is the callback method which is called when the animation effect is completed.

Return Value: It returns the selected elements with the given visual effect.

Links for jQuery UI:

<link
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Example 1: In the following example, the show() function is implemented in jQuery code with shake effect type and time and distance as its options, and one callback function as its parameters which displays the visual effect for the matched elements. The callback function is called after the effect is completed or done on the screen. The callback function fades out the container after the completion of the effect during the process.

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
  
    <title>jQuery UI show() method</title> 
  
    <link href= 
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet"> 
  
    <script src= 
"https://code.jquery.com/jquery-1.10.2.js"> 
    </script> 
  
    <script src= 
"https://code.jquery.com/ui/1.10.4/jquery-ui.js"> 
    </script> 
  
    <style> 
        .height { 
            height: 10px; 
        } 
  
        .divClass { 
            width: 400px; 
            height: 180px; 
        } 
  
        #btnID { 
            padding: .5em 1em; 
            text-decoration: none; 
        } 
  
        #container { 
            position: relative; 
            width: 260px; 
            height: 145px; 
            padding: 0.3em; 
            border: 1px solid black 
        } 
    </style> 
  
    <script> 
        $(function () { 
  
            function showEffect() { 
  
                // Run the show  method with shake effect 
                $("#container").show("shake", { times: 10, 
                        distance: 200 }, 2000, callback); 
            }; 
  
            // Callback method 
            function callback() { 
                setTimeout(function () { 
                    $("#container:visible") 
                        .removeAttr("style").fadeOut(); 
                }, 2000); 
            }; 
            $("#btnID").click(function () { 
                showEffect(); 
                return false; 
            }); 
            $("#container").hide(); 
        }); 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
  
    <b>jQuery UI show method </b> 
    <div class="height"></div> 
  
    <div class="divClass"> 
        <div id="container"> 
            <p> 
                This is jQuery UI show method demonstration, 
                which displays the matched elements.The 
                 matched element will show the element with 
                  the chosen effect in the jQuery code. 
            </p> 
        </div> 
    </div> 
  
    <div class="height"></div> 
    <button id="btnID">Show effect</button> 
</body> 
  
</html> 

Output:

Example 2: In the following example, the simple implementation of show() method is done in jQuery code with the bounce visual effect as its parameter. The method is applied on “h2” element of the user interface page. ui-corner-all and ui-state-default are the in-built classes provided by the jQuery UI CSS framework to make the UI more interactive and beautiful.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        jQuery UI Show Method with bounce effect 
    </title> 
  
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
  
    <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-2.1.3.js"> 
    </script> 
  
    <script src= 
        "http://code.jquery.com/ui/1.11.2/jquery-ui.js"> 
    </script> 
  
    <style> 
        #btnID { 
            padding: .4em 1.5em; 
            text-decoration: none; 
        } 
  
        .highlight { 
            color: #090; 
            font-family: Calibri; 
            font-size: 2em; 
            text-shadow: 2px 2px #FF0000; 
        } 
  
        .height { 
            height: 10px; 
        } 
    </style> 
  
    <script> 
        $(document).ready(function () { 
            $("h2").hide(); 
            $("#btnID").click(function () { 
  
                // Show with bounce effect 
                $("h2").show("bounce", 3000); 
            }) 
        }); 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>jQuery UI show method with bounce effect</b> 
    <div class="height"></div> 
    <h2 class="highlight">Learning jQuery UI </h2> 
  
    <button id="btnID" 
        class="ui-corner-all ui-state-default"> 
        Show effect 
    </button> 
</body> 
  
</html> 

Output:

Example 3: The jQuery UI framework provides show() method with many varieties of visual effects as its parameter. In the following example, we will demonstrate the method with a combobox menu option to select a visual effect type by the user. When the effect type is selected by the user, it is passed to show() method for the output, as shown in the output image. The programmer can write the code and choose parameters as per the project requirement.

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, 
            initial-scale=1"> 
  
    <title>jQuery UI Show Method with All effects</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-2.1.3.js"> 
    </script> 
  
    <script src= 
        "http://code.jquery.com/ui/1.11.2/jquery-ui.js"> 
    </script> 
  
    <style> 
        .height { 
            height: 10px; 
        } 
  
        .divClass { 
            width: 500px; 
            height: 200px; 
        } 
  
        #btnID { 
            padding: .4em 1em; 
            text-decoration: none; 
        } 
  
        #container { 
            width: 250px; 
            height: 180px; 
            padding: 0.5em; 
            position: relative; 
        } 
  
        #container h4 { 
            margin: 0; 
            padding: 0.3em; 
            text-align: center; 
        } 
    </style> 
  
    <script> 
        $(function () { 
  
            // show the selected effect 
            // type by the user 
            function showEffect() { 
  
                var effectType = $("#typesOfEffectId").val(); 
  
                // show the effect with call back 
                $("#container").show(effectType, 800, callback); 
            }; 
  
            // Callback function to get original state 
            function callback() { 
                setTimeout(function () { 
                    $("#container:visible") 
                        .removeAttr("style").fadeOut(); 
                }, 2000); 
            }; 
  
            // Set effect from select menu value 
            $("#btnID").on("click", function () { 
                showEffect(); 
            }); 
  
            $("#container").hide(); 
        }); 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>jQuery UI show method with all type of effects</b> 
  
    <div class="height"></div> 
      
    <div class="divClass"> 
        <div id="container" class="ui-widget-content ui-corner-all"> 
            <h4 class="ui-widget-header ui-corner-all">Show</h4> 
            <p> 
                In this tutorial, we are going to learn about 
                jQuery UI framework show method with different 
                variety of effects. 
            </p> 
        </div> 
    </div> 
  
    <select name="effectTypes" id="typesOfEffectId"> 
        <option value="blind">Blind</option> 
        <option value="clip">Clip</option> 
        <option value="drop">Drop</option> 
        <option value="explode">Explode</option> 
        <option value="fade">Fade</option> 
        <option value="fold">Fold</option> 
        <option value="highlight">Highlight</option> 
        <option value="puff">Puff</option> 
        <option value="pulsate">Pulsate</option> 
        <option value="slide">Slide</option> 
    </select> 
  
    <button id="btnID" class="ui-state-default ui-corner-all"> 
        show Effect 
    </button> 
</body> 
  
</html> 