Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery | Effect show() Method

  • Difficulty Level : Easy
  • Last Updated : 19 Feb, 2019

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.




<!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:

  • Before click on the button:
  • After click on the button:

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




<!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:

  • Before click on the button:
  • After click on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :