hide method in jQuery with example
1. hide() method is used to hide the elements.
2. hide() with no duration is equivalent to css property 'display : none'.
3. hide(200) with duration specified becomes animation method.
4. Duration is given in milliseconds, and slow and fast string indicates 600 and 200 milliseconds respectively.
Example 1 :
<html>
<head>
<title>hide in jQuery</title>
<style>
fieldset
{
width:300px;
margin-left:400px;
}
#buttonDiv
{
margin-left:400px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(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();
});
});
</script>
</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>
Demo :In the above example, we have used hide() method. When we click the "HideNormal" button, it will hide the form like 'display : none' css property.
There is no animation involved, as we have not specified duration. When we click on "HideAnimation" button it hides the form with animation effect as duration for hiding is specified.
0 comments:
Post a Comment