.show()

Syntax and Description

.show([duration][, callback])

displays the matched elements.

duration (optional)A string or number determining how long the animation will run
callback (optional)A function to call once the animation is complete

Its return value is the jQuery object, for chaining purposes.

With no parameters, the .show() method displays an element.

$('.target').show();

Durations are given in milliseconds; higher values indicate slower animations.

The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

If supplied, the callback is fired once the animation is complete.

We can animate any element, such as a simple image:

Show hidden div tags


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from w w w  . j a va 2s .c  o m-->
           $("div:hidden").show(3000);
        });
    </script>
  </head>
  <body>
    <body>
      <span></span>
      <div style="display:none;">Hider! java2s.com</div>
      <div></div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.show()

Click to show


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#message {<!--from   w  w  w . j  a  v  a2  s.c  o  m-->
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
  background-color: orange;
}

#container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 500px;
}
</style>
<script
  src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("#message").click(function(e) {
      e.stopPropagation();
      $(this).hide();
    });
    $(document).click(function() {
      $("#message").show();
    });
  });
</script>
</head>
<body>
  <div id="message">This is a message.</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

.show()

Show fast


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- w w w .j  a v  a2  s.c o m-->
             $("p").show("fast")
        });
    </script>
  </head>
  <body>
    <body>
        <p style="display:none">Hello! java2s.com</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.show()

Show hidden fast


<html>
  <head>
    <style>
      div { width:50px; height:40px; margin: 5px; float:left;background:red; }
    </style>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){<!--from   www.j a v a  2 s  .c om-->
          $("button").click(function () {
             $("div:hidden").show("fast");
          });
    });
    </script>
  </head>
  <body>
      <button>Show</button>
      <div></div>
      <div style="display:none;"></div>
      <div></div>
      <div></div>
      <div style="display:none;"></div>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.show()

Show hidden slow


<html>
  <head>
    <style>
      div { width:50px; height:40px; margin: 5px; float:left;background:red; }
    </style>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){<!-- w  w w  .j ava 2 s. c  om-->
          $("button").click(function () {
             $("div:hidden").show("slow");
          });
    });
    </script>
  </head>
  <body>
      <button>Show</button>
      <div></div>
      <div style="display:none;"></div>
      <div></div>
      <div></div>
      <div style="display:none;"></div>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.show()

Show in millisecond


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from w  w  w . j  a v  a 2s.  c  om-->
             $("p").show(2000)
        });
    </script>
  </head>
  <body>
    <body>
        <p style="display:none">Hello! java2s.com</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.show()

Show normal


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   www  .j  ava  2  s. c o  m-->
             $("p").show("normal")
        });
    </script>
  </head>
  <body>
    <body>
        <p style="display:none">Hello. java2s.com</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.show()

Pass arguments.callee to show callback function


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   w ww  .j a  v a  2s.com-->
            $("#showHandler").click(function () {
              $("div:eq(0)").show("fast", function () {
                $(this).next().show("fast", arguments.callee); 
              });
            });
            $("#hideHandler").click(function () {
              $("div").hide(2000);
            });
        });
    </script>
  </head>
  <body>
    <body>
      <button id="showHandler">Show</button>
      <button id="hideHandler">Hide</button>
    
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D java2s.com</div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.show()

Div based Dialog


<!--from   w w w. j a v  a 2  s  .c o m-->
<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"> 
    </script>

    <script type='text/javascript'>
        $(document).ready(
          function() {
            $('input#tmpOpen').click(
              function($e) {
                $('div#myDialog').show(5000);
              }
            );
            
            $('input#tmpClose').click(
              function($e) {      
                $('div#myDialog').hide(5000);
              }
            );
          }
        );
    </script>
    <style type='text/css'>
        div#myDialog {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 200px;
            margin: -101px 0 0 -251px;    
            border: 1px solid rgb(128, 128, 128);
        }
        
        div#tmpButtons {
            position: absolute;
            bottom: 5px;
            right: 5px;
        }
    </style>
  </head>
  <body>
     <input type='submit' id='tmpOpen' value='Open' />
     <div id='myDialog'>
       <p>
         Dialog content
       </p>
       <div id='tmpButtons'>
         <input type='submit' id='tmpClose' value='Close' />
       </div>
     </div>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.show()