.hide()

Syntax

.hide([duration][, callback])

Parameters

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

Return value

The jQuery object, for chaining purposes.

Description

With no parameters, the .hide() method is the simplest way to hide an element.

$('.target').hide();

Hide the matched elements.

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.

Examples

Hide and Slide down

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("p").click(function () {
                    $("p").hide();

                    $("p").slideDown();
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello</p>
    </body>
</html>

Click to view the demo

Click to hide

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("p").click(function () {
                  $(this).hide();
                  return true;
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello</p>
    </body>
</html>

Click to view the demo

Hide and remove

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("p").hide(2000, function () {
                        $(this).remove();
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello</p>
    </body>
</html>

Click to view the demo

Hide fast

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("p").click(function () {
                  $(this).hide("fast");
                  return true;
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello</p>
    </body>
</html>

Click to view the demo

Hide in millisecond

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("p").click(function () {
                  $(this).hide(2000);
                  return true;
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello</p>
    </body>
</html>

Click to view the demo