.hide()

Syntax and Description

.hide([duration][, callback])

Hide 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 .hide() method is the simplest way to hide an element.

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

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.

Hide and Slide down


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   www  . ja v a2 s  .  co  m-->
                $("p").click(function () {
                    $("p").hide();

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

Click to view the demo

The code above generates the following result.

.hide()

Click to hide


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   ww w  .  j  a va 2  s . com-->
                $("p").click(function () {
                  $(this).hide();
                  return true;
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello java2s.com</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.hide()

Hide and remove


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   w  ww .  java2 s. c o  m-->
                $("p").hide(2000, function () {
                        $(this).remove();
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello java2s.com</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.hide()

Hide 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  . com-->
                $("p").click(function () {
                  $(this).hide("fast");
                  return true;
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello java2s.com</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.hide()

Hide in millisecond


<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  om-->
                $("p").click(function () {
                  $(this).hide(2000);
                  return true;
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello java2s.com</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.hide()