jQuery Hide Show Effect

jQuery used to provide a various kind of effects like Hide, Show, Slide, Fade, Animate and toggle effects.

jQuery hide() method hide the matched elements. and jQuery show() method display the matched elements.

Syntax

$(selector).show();        // This syntax does not accept any arguments.
$(selector).show( [duration], [callback] );
$(selector).hide();        // This syntax does not accept any arguments.
$(selector).hide( [duration], [callback] );

Parameters

  • duration default: 400 Accept string or number that determining how long animation will run. For example predefined duration ("slow", "normal", "fast"), or number of milliseconds to run the animation (3000, 1000).

    • Example. "slow", "normal", "fast", 3000 (milliseconds), 1000 (milliseconds).

  • callback Optional. A function to call once the animation is complete.

Example

<!DOCTYPE html>
<html>
<head>
  <title>jQuery hide() show() function</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#show").click(function () {
        $("p").show();
      }); 
      $("#hide").click(function () {
        $("p").hide();
      }); 
    });
  </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...   »

Example Result :

Here are all jQuery effects references, see all jQuery effects references.