.hide()
In this chapter you will learn:
- Syntax and Description for .hide()
- Hide and Slide down
- Click to hide
- Hide and remove
- Hide fast
- Hide in millisecond
Syntax and Description
.hide([duration][, callback])
Hide the matched elements.
duration (optional)
A string or number determining how long the animation will runcallback (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><!-- j a v a 2 s.c o m-->
<head>
<script src="http://java2s.com/style/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 java2s.com</p>
</body>
</html>
Click to hide
<html><!--from ja v a2 s . c o m-->
<head>
<script src="http://java2s.com/style/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 java2s.com</p>
</body>
</html>
Hide and remove
<html><!--from j a v a 2 s. c o m-->
<head>
<script src="http://java2s.com/style/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 java2s.com</p>
</body>
</html>
Hide fast
<html><!-- j av a 2s . c o m-->
<head>
<script src="http://java2s.com/style/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 java2s.com</p>
</body>
</html>
Hide in millisecond
<html><!--from ja v a2 s .c o m-->
<head>
<script src="http://java2s.com/style/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 java2s.com</p>
</body>
</html>
Next chapter...
What you will learn in the next chapter: