$(document).ready(function () {
$("#buttonHideNormal").click(function () {
$("#form").hide();
});
$("#buttonHideAnimation").click(function () {
$("#form").hide("slow", function () {
alert("hide with duration slow !!");
});
});
$("#buttonShow").click(function () {
$("#form").show();
});
});
<html>
<head>
<title>hide in jQuery</title>
</head>
<body>
<fieldset id="form">
<legend>Form</legend>
<table>
<tr>
<td><label>Name:</label></td>
<td><input type="text" id="txtName"><td>
</tr>
<tr>
<td><label>Age:</label></td>
<td><input type="text" id="txtAge"><td>
</tr>
<tr>
<td><label>Address:</label></td>
<td><input type="text" id="txtAddress"><td>
</tr>
</table>
</fieldset><br />
<div id="buttonDiv">
<input type="button" id="buttonHideNormal" value="Hide Normal"/>
<input type="button" id="buttonHideAnimation" value="Hide Animation"/>
<input type="button" id="buttonShow" value="Show"/>
</div>
</body>
</html>
fieldset
{
width:300px;
margin-left:100px;
}
#buttonDiv
{
margin-left:100px;
}