jQuery show() and hide() are the most common used effect.

  1. show() – Display the matched elements.
  2. hide() – Hide the matched elements.

Both methods are support duration as parameter : slow, fast, or exact milliseconds. If this parameter is omitted, the default 400 milliseconds is apply.

Try it yourself

<html>
<head>
 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 
<style type="text/css">
	p{
		padding:8px;
		margin:16px;
		border:1px solid blue;
		width:250px;
		height:50px;
		background-color:#999999;
		color:white;
	}
</style>
 
</head>
 
<body>
 
<h1>jQuery show() and hide() example</h1>
 
<p>Hello, this show() and hide() example</p>
 
<button id=show>show()</button>
<button id=hide>hide()</button>
<button id=reset>Reset</button>
 
<script type="text/javascript">
 
$("#show").click(function () {
   $("p").show('fast');
});
 
$("#hide").click(function () {
   $("p").hide(1000);
});
 
$("#reset").click(function(){
	location.reload();
});
</script>
 
</body>
</html>
Try Demo
Note : You can find more similar articles at - jQuery Tutorials
You might also like this tutorials :
JAX-WS Tutorials
Android Tutorials
Apache Wicket Tutorials
Java I/O Tutorials
JSF 2 Tutorials