jQuery .hide() hides elements

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(){<!--from   w w  w. j  a  va 2 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

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(){<!--from www.  jav  a 2 s  . c om-->
                $("p").click(function () {
                  $(this).hide();
                  return true;
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello java2s.com</p>
    </body>
</html>

Click to view the demo

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(){<!--from   w ww . j  av a2s . co m-->
                $("p").hide(2000, function () {
                        $(this).remove();
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello java2s.com</p>
    </body>
</html>

Click to view the demo

Hide fast


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

Click to view the demo

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(){<!--from   w  ww .  j  av a2 s.  com-->
                $("p").click(function () {
                  $(this).hide(2000);
                  return true;
                });
        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello java2s.com</p>
    </body>
</html>

Click to view the demo





















Home »
  jQuery »
    jQuery Tutorial »




Basics
Selector
DOM
Event
Effect
Utilities