Skip to content
Related Articles

Related Articles

jQuery Effect show() Method

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 18 Nov, 2022
Improve Article
Save Article

The show() Method in jQuery is used to display the hidden and selected elements. 

Note: This method display the hidden elements which are using CSS display: none property. The elements are not visible whose visibility is hidden. 

Syntax:

$(selector).show( speed, easing, callback )

Parameters:This method accepts three parameters as mentioned above and described below:

  • Speed: It is an optional parameter and used to specify the speed of the fading effect. The default value of speed is 400 millisecond. The possible value of speed are:
    • milliseconds
    • “slow”
    • “fast”
  • Easing: It is an optional parameter and used to specify the speed of element to different points of animation. The default value of easing is “swing”. The possible value of easing are:
    • “swing”
    • “linear”
  • callback: It is optional parameter. The callback function is executed after show() method is completed.

Below examples illustrate the show() method in jQuery: 
Example 1: This example showing display: none content with given speed. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        jQuery Effect show() Method
    </title>
  
    <style>
        #Outer {
            border: 1px solid black;
            padding-top: 40px;
            height: 140px;
            background: green;
            display: none;
        }
    </style>
  
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
  
    <div id="Outer">
        <h1 style="color:white;">
            GeeksForGeeks
        </h1>
    </div><br>
  
    <button id="btn">
        Show
    </button>
  
    <!-- Script to show display:none content -->
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $("#Outer").show(1000);
            });
        });
    </script>
</body>
  
</html>


Output:

 

Example 2: This example showing display: none content with swing easing value. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        jQuery Effect show() Method
    </title>
  
    <style>
        #Outer {
            border: 1px solid black;
            padding-top: 40px;
            height: 140px;
            background: green;
            display: none;
        }
    </style>
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
  
    <div id="Outer">
        <h1 style="color:white;">
            GeeksForGeeks
        </h1>
    </div><br>
    <button id="btn">
        Show
    </button>
  
    <!-- Script to show display: none content
            with swing easing -->
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $("#Outer").show("swing");
            });
        });
    </script>
</body>
  
</html>


Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!