jQuery show() Method

jQuery show() method hides the selected elements. jQuery show() method actual set inline CSS property style="display: block;" on selected element. And selected elements will be revealed immediately with no animation.

Syntax

This syntax represent to the show() method

$(selector).show( duration, easing, callback );
Parameter Type Description
duration Number
String		 Required. Accept string or number that determining how long the animation will run.
default value is 400
Accepted values:
  • Predefined duration ("slow", "normal", "fast")
  • number of milliseconds (3000, 1000)
easing String Optional. Specifies the which easing function to use for the transition.
default value is "swing"
Accepted values:
  • "swing" - elements moves slows at the starting and ending, but faster in the middle
  • "linear" - elements moves in a constant speed
callback Function Optional. A function to call once the the animation is complete.

Example

Here, in this example represents show() effect on selected elements when click on button.

<html>
<head>
  <title>jQuery hide() show() method</title>
  <script src="jquery-latest.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("p").hide();
      });
      $("#btn2").click(function(){
        $("p").show();
      });  
    });
  </script>
  <style type="text/css">
    p {
      background-color: #99FFFF;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <button id="btn1">Hide Paragraph</button> 
  <button id="btn2">Show Paragraph</button> 
  <p>This paragraph will be hide/show animated.</p> 
</body>
</html>

Run it...   »