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 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>
<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 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>
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>
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>
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>