jQuery UI | show() Method

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
        rel="stylesheet">
  
    <script src=
    </script>
  
    <script src=
    </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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
        rel="stylesheet">
  
    <script src=
    </script>
  
    <script src=
    </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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
        rel="stylesheet">
  
    <script src=
    </script>
  
    <script src=
    </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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.